如何在不设置显式宽度的情况下制作div的内容？

Question

我希望有一系列包含标题和其他信息的帖子。问题是，根据包含div的空间大小和标题的长度，它会导致我的“post-summary”（标题，日期等）div换行到下一行，使其看起来像：

这是它正在做的事情：

这就是我想要它做的事情（请注意标题已包装，但并未导致整个“post-summary”包装到下一行，如上例所示）：

我不在乎标题包裹多少或包裹多少行。我只是不希望它强制同时包含post-info的父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;
}

Answer 2

您可以像这样对代码进行一些调整：

.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/

Answer 3

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

要整理导航栏，请从.post-list中删除浮动并终止清除<div>。如果您希望导航栏占据整列，请将margin-right:220px添加到.post-list。

例如：

• http://jsfiddle.net/ambiguous/tGQeJ/1/（没有220px右边距）
• http://jsfiddle.net/ambiguous/tGQeJ/2/（右边距为220px）