css - 让文本正确格式化而不是换行在 div 列中

Question

我只能找到如何做我的文本当前正在做的事情。不是阻止它。我希望文本不要环绕在图像下方。但是我不能使用固定宽度。调整页面大小时，文本需要在同一列中继续显示。

http://jsfiddle.net/avHcA/

    <div id="apDiv1">
    <div id="apDiv2">
    <strong>image goes here</strong>
    </div>
    <div id="apDiv3" ><p><strong>Name Goes here in div with main text</strong></p>
    <p>text that I want to stay in its it div and not wrap underneath the 
    image goes here</p></div></div>

Answer 1

如果您使用百分比宽度，如下所示:

#apDiv2 {
    float: left;
    padding-right: 2%;
    width: 38%;
    z-index: 2;
}


#apDiv3 {
    float: left;
    width: 60%;
    z-index: 3;
}

然后文本将继续在同一列中，即使窗口已调整大小时。只需确保在每个 #apDiv1 之后清除 float 。要清除 float ，请添加类似 <div class="clear"></div> 的内容其中 clear 类的 css 如下:

.clear { clear: both; }