将段落宽度限制为其父div [英] Limit the paragraph width to its parent div

问题描述

我有以下HTML代码:

I have the following HTML-code:

<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

So I have two divs, div1 and div2

问题在于该段落太长，因此div被下推.我希望div2在正常屏幕上(当屏幕尺寸足够大时)保持在div1旁边.如果屏幕太小(例如在手机上)，则div2转到下一行.

The problem is the paragraph is too long so the div is pushed down. I want div2 to stay next to div1 on a normal screen (when the screensize is big enough). If the screen is too small (like on a mobile phone), div2 shoud go to the next line.

是否有可能将段落的宽度限制为其父div的宽度，所以div2仍然位于div1旁边?

Isn't it possible that the width of the paragraph is limited to the width of its parent div, so div2 is still next to div1?

顺便说一句，我不想​​为div设置(max-)宽度...

Btw, I don't want to set a (max-)width for the divs...

非常感谢！

Wannes

推荐答案

将 width 设置为 div1 ，然后 p 将采用它. div2 也需要一个宽度.

Set width to div1 and p will adopt it. div2 also needs a width.

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

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

To accomplish what you want you need to use min-width. Check the JsFiddle and try to drag the middle border to see the effect. This is by the advice of @Sergiy T. Otherwise you would really need to use scripts.

这篇关于将段落宽度限制为其父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！