4

我有以下 HTML 代码： 

<div style="width:100%">
    <div id="div1" style="float:left">
        <img src="http://www.lappelducourty.be/test/wp-content/uploads/2013/01/siesta-300x225.jpg">
    </div>
    <div id="div2" style="float:left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero lectus, varius placerat risus. Pellentesque condimentum dapibus fermentum. Nam eget magna nisl, a iaculis massa. Sed congue ultrices felis sed volutpat. Donec tristique ullamcorper ullamcorper. </p>
    </div>
</div>

在这里你可以找到一个例子。

所以我有两个 div，div1 和 div2

问题是段落太长，所以 div 被下推。我希望 div2 在普通屏幕上保持在 div1 旁边（当屏幕尺寸足够大时）。如果屏幕太小（比如在手机上），div2 应该转到下一行。

不是说段落的宽度限制在其父div的宽度，所以div2还在div1旁边吗？

顺便说一句，我不想​​为 div 设置（最大）宽度...

非常感谢！！

万斯

4

5 回答 5

2

将宽度设置为div1并且p将采用它。div2也需要一个宽度。

<style>
#mainContainer {
    width: 100%;
}
#div1, #div2 {
    float: left;
    width: 45%;
    min-width: 300px;
}
</style>

要完成你想要的，你需要使用 min-width。检查JsFiddle，尝试拖动中间边框看看效果。这是@Sergiy T 的建议。否则你真的需要使用脚本。

于 2013-02-12T10:43:42.510 回答
0

如果我理解正确，您想删除float:left.div2

于 2013-02-12T10:05:43.343 回答
0

您可以替换float:left为 display:table-cell; vertical-align:top您的 div1 和 div2

编辑： 我几乎可以通过以下代码实现您所需要的。

<div style="width:100%;">
<div style="float:left;">
    <img src="http://www.lappelducourty.be/test/wp-content/uploads/2013/01/siesta-300x225.jpg" />
</div>
<p>test</p>
<div style="display:table;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...] Sed in quam dolor. </p>
</div>

棘手的部分是<p>test</p>。调整窗口大小时，没有段落或空白的文本不会移动到图像的底部。我认为任何块元素都不会经过测试。我仍然不知道为什么会这样。

于 2013-02-12T10:06:13.270 回答
0

要 div1 修复width=300px和margin-right:10px。删除float:left到div2。

于 2013-02-12T10:38:48.147 回答
0

将图像放在第二个 div 中，使用左浮动。

于 2013-02-12T10:42:45.417 回答