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

Question

我想有一系列的标题和其他信息的帖子。问题是，根据包含的div有多大的空间和标题的长度，它会导致我的"post-summary“(title，date等) div换到下一行，使其看起来像：

下面是它正在做的事情：

​

下面是我想让它做的事情(注意标题是换行的，但并没有像前面的例子那样让整个"post-summary“换到下一行)：

​

我不关心标题折行多少或折行到多少行。我只是不希望它强制父div，它也包含post-info，像在第一个例子中那样降到post - number以下。

我已经创建了一个示例jsfiddle来进一步说明我正在做的事情：http://jsfiddle.net/aZvVU/6/

当文章标题没有足够的空间时，我如何才能使它简单地换行，而不是让整个"post-summary“div掉到下一行？我不想让标题宽度固定，如果我可以避免的话。

Answer 1

将浮动放在.post-summary上，你不需要它，它会导致你的包装。然后将margin-left: 40px;添加到.post-summary，以确保.post-number有空间，并给人一种.post-number的完整高度列的错觉，而不必在高度上乱搞。

要对导航栏进行排序，请删除.post-list中的浮点数并删除清除的<div>。如果您希望导航栏占据整个列，则向.post-list添加一个margin-right:220px。

例如：

• http://jsfiddle.net/ambiguous/tGQeJ/1/ (不带220px右margin)
• http://jsfiddle.net/ambiguous/tGQeJ/2/ (带220px右边距)

Answer 2

您可以将此作为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;
}

Answer 3

你可以像这样对你的代码做一些调整：

.post-list
{
    float: left;
    margin-right: 250px;  /* make sure it doesn't touch your right-nav*/
}

.right-nav
{
    background-color: #c0c0c0;
    padding: 10px;
    min-height: 300px;
    width: 200px;
    position: absolute; right: 0px; top: 0px; /* position it */
}

下面是一个工作示例，其中包含您的代码http://jsfiddle.net/YumSP/

已编辑以修复标题包装http://jsfiddle.net/YumSP/1/