html - 将段落宽度限制为其父 div

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 设置(最大)宽度...

非常感谢!!

华纳

Answer 1

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

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

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