Question

我正在制作一个网站，但我有点问题。我有一个图像和一些文本，但文本不断深入到图像如何设置直到文本的右侧？ enter image description here

以下是我的一些代码。

<img src="~/Images/Billede%20af%20mig.PNG" height="254px" width="200px" />

<section class="contact">
    <header>
        <h3>Telefon:</h3>
    </header>
    <p>
        <span class="label">Mobil nummer:</span>
        <span></span>
    </p>
</section>

<section class="contact">
    <header>
        <h3>E-mail:</h3>
    </header>
    <p>
        <span class="label">Spørgsmål:</span>
        <span><a href="mailto:info@mail.nu">Info@mail.nu</a></span>
    </p>

我的CSS

    /* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

Answer 1

将你的内容放在div中并给他们造型

<div>
    <div style="float:left;">
        <img src="~/Images/Billede%20af%20mig.PNG" height="254px" width="200px" />
    </div>
    <div>
        <section class="contact">
            <header>
                 <h3>Telefon:</h3>

            </header>
            <p> <span class="label">Mobil nummer:</span>
 <span></span>

            </p>
        </section>
        <section class="contact">
            <header>
                 <h3>E-mail:</h3>

            </header>
            <p> <span class="label">Spørgsmål:</span>
 <span><a href="mailto:info@mail.nu">Info@mail.nu</a></span>

            </p>
        </section>
    </div>
</div>

看看我创造的这个小提琴

http://jsfiddle.net/yadUR/3/

Answer 2

创建两个div并将图像放在一个Div中，将文本放在另一个Div中，并将Divs样式设置为左右浮动，如下所示：

<div>
    <div style="float: left">
    <img src="~/Images/Billede%20af%20mig.PNG" height="254px" width="200px" />
    </div>

    <div style="float: right">
    <section class="contact">
        <header>
            <h3>Telefon:</h3>
        </header>
        <p>
            <span class="label">Mobil nummer:</span>
            <span></span>
        </p>
    </section>

    <section class="contact">
        <header>
            <h3>E-mail:</h3>
        </header>
        <p>
            <span class="label">Spørgsmål:</span>
            <span><a href="mailto:info@mail.nu">Info@mail.nu</a></span>
        </p>
     </div>
</div>

或或者如果您使用<asp:Image />，只需在Image.ImageAlign上设置<img>财产

<asp:Image src="~/Images/Billede%20af%20mig.PNG" height="254px" width="200px" ImageAlign="Left"/>

文本将自动环绕图像..

有关详情，请查看Image.ImageAlign MSDN

ASP.NET如何将Text设置为图像的右侧

2 个答案: