css - 带有文本换行的流体浮动 div

Question

我有一个并排浮动的 2 个 div 容器。

第一个 div 没有应用固定宽度，而第二个有。我想要的是第一个 div 在第二个 div 未呈现时扩展全宽。

但是我面临的问题是，当 div 1 中的段落变长时，它不会按应有的方式换行，而是最终将 div1 换行在 div2 下。我想要实现的是让长段落包含在 div 1 中并尊重浮动的 div 2。

下面的代码可能会更好地解释......

<div style="width:600px; height: 600px; margin-left: auto; margin-right: auto; border:1px solid blue;">
        <div style="float:left; border:1px solid green;">
            <p>Main long text jhjkhjkhjkhjk hj hjkh jkh jkh jkh jkh jkh jk hjk h jkh jh jkh jkh jkh jk hjk hjk hjkhkjhjkhjkhjkhjkhjkhjkhjkhjkhjkhjkh</p>
        </div>
        <div style="float:right; border:1px solid red; width: 200px;">
            <p>Secondary</p>
        </div>

提前致谢

Answer 1

将宽度添加到第一个内部 div

<div style="width:600px; height: 600px; margin-left: auto; margin-right: auto; border:1px solid blue;">
        <div style="float:left; border:1px solid green; width: 396px;">
            <p>Main long text jhjkhjkhjkhjk hj hjkh jkh jkh jkh jkh jkh jk hjk h jkh jh jkh jkh jkh jk hjk hjk hjkhkjhjkhjkhjkhjkhjkhjkhjkhjkhjkhjkh</p>
        </div>
        <div style="float:right; border:1px solid red; width: 200px;">
            <p>Secondary</p>
        </div>