Question

我有以下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>

Here you can find an example.

所以我有两个div，div1和div2

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

段落的宽度是否可能限制为其父div的宽度，所以div2仍然在div1的旁边？

顺便说一下，我不想为div设置（max-）宽度......

非常感谢!!

Wannes

Answer 1

将宽度设置为 div1 ， p 将采用它。 div2 还需要宽度。

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

要完成您想要的任务，您需要使用最小宽度。检查JsFiddle并尝试拖动中间边框以查看效果。这是@Sergiy T的建议。否则你真的需要使用脚本。

Answer 2

如果我理解正确，您要删除float:left上的div2。

Answer 3

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

修改通过以下代码，我几乎可以实现您的需求。

<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>。如果没有段落或空格，则在重新调整窗口大小时，文本不会移动到图像的底部。我认为任何块元素都不会测试。我仍然不知道为什么会这样。

Answer 4

div1修复 width = 300px 和 margin-right：10px 。将 float：left 移至 div2 。

Answer 5

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

将段落宽度限制为其父div

5 个答案: