当前位置：文江博客话题详情

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

发布于 2024-10-18 05:41:30 字数 570 浏览 1 评论 0原文

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

：它在做什么：在此处输入图像描述

这是我想要它执行的操作（注意标题已换行，但并没有导致整个“ post-summary" 换行到下一行，如前面的示例所示）：在此处输入图像描述

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

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

如何使帖子标题简单当它没有足够的空间时换行并且不会导致它使整个“后摘要”div 下降到下一行？如果可以避免的话，我不想固定标题宽度。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深爱成瘾 2024-10-25 05:41:30

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

You can use this as a starting point 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;
}

回复收藏 0 原文

墨洒年华 2024-10-25 05:41:30

您只需对代码进行一些调整，如下所示：

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

You can just make a few tweaks to your code like so:

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

Here is a working example, with your code http://jsfiddle.net/YumSP/

edited to fix title wrapping http://jsfiddle.net/YumSP/1/

回复收藏 0 原文