Question

我用一个文本div和一个向右浮动的图像div创建了一个包装器div。一个简单的任务，是的，但今晚不适合我。我无法使其发挥作用并停滞不前。

以下是它现在的样子：http://bit.ly/RNinCm

CSS：

introwrapper {
    width: 938px;
    background-color: white;
    margin-bottom: -20px;
    padding-left: 5px;
}

.introtekst {
    font-size: 30px;
    text-transform: uppercase;
    font-family: Arial, Verdana, sans-serif;
    color: #a81c11;
}

.gammeltbilde {
    float: left;
}

HTML：

<div id="introwrapper">
        <div class="introtekst">
            <p>Some text here.</p>
        </div>
        <div class="gammeltbilde">
            <img src="bilder/kjiptbilde.jpg" alt="bilde fra parken"/>
        </div>
</div>

Answer 1

像这样改变你的CSS：

.introtekst {
    font-size: 30px;
    text-transform: uppercase;
    font-family: Arial, Verdana, sans-serif;
    color: #a81c11;
    display:inline;
    width: 80%; /* or dependent on what you like */
    float: left;
} 

.gammeltbilde {
    float: right;
    display:inline;
    width: 20%; /* relative to width for introtekst */
}

Answer 2

图片大于容器，尝试在图片上设置尺寸：

<img src="bilder/kjiptbilde.jpg" alt="bilde fra parken" width="800" />

（800使其适合，但您可能需要根据需要进行更改。）

Answer 3

你可以在img上放置width="800px"标签，但我建议尽可能远离它，并在Photoshop或类似的程序中实际调整图像大小。如果您的网页包含大量已使用width标记缩小的图片，那么您的网页加载时间会相当大。

Answer 4

您可以删除<img src="bilder/kjiptbilde.jpg" alt="bilde fra parken">

图片不会进入div

4 个答案: