html - 如何在不设置显式宽度的情况下使 div 的内容换行？

Question

我想要一系列带有标题和其他信息的帖子。问题是，根据包含的 div 的空间大小和标题的长度，它导致我的“后摘要”(标题、日期等)div 换行到下一行，使其看起来像:

这是它正在做的事情:

这是我想要它做的(注意标题换行，但不会像前面的示例那样导致整个“后摘要”换行到下一行):

我不在乎标题换行多少或换行多少行。我只是不希望它像第一个示例那样强制还包含帖子信息的父 div 低于帖子编号。

我创建了一个示例 jsfiddle 来进一步说明我在做什么: http://jsfiddle.net/aZvVU/6/

当没有足够的空间时，如何使后标题简单地换行而不会使整个“后摘要”div 掉落到下一行？如果可以避免，我不想固定标题宽度。

Answer 1

您可以以此为起点http://jsfiddle.net/A8csU/

HTML:

<div id="parent">
    <div id="right-child">
        <p>Right stuff.</p>
    </div>
    <div id="left-child">
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It  has roots in a piece of classical Latin literature from 45 BC, making it  over 2000 years old. Richard McClintock, a Latin professor at  Hampden-Sydney College in Virginia, looked up one of the more obscure  Latin words, consectetur, from a Lorem Ipsum passage, and going through  the cites of the word in classical literature, discovered the  undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33  of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by  Cicero, written in 45 BC. This book is a treatise on the theory of  ethics, very popular during the Renaissance. The first line of Lorem  Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section  1.10.32.</p>
    </div>
</div>

CSS:

#left-child {
 border: 1px solid red;
    margin-right: 102px; /* 100px + 1px border + 1px border */
}

#right-child {
    width: 100px;
    border: 1px solid blue;
    float: right;
}