Question

我有两个块元素。第一个浮在左边。我希望正确的元素也是一个块，并保持其方形。相反，其中的文本包裹在浮动到左侧的元素下。

CSS：

.comment-date { 
    float: left;     
}

HTML：

<div class="comment-date">07/08 23:08</div>
<div class="comment-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna 
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</div>

lorem ipsum文本包含在日期之下。我希望它保持一个块状，漂浮在日期的右边。我怎样才能做到这一点？

这是一个小提琴： http://jsfiddle.net/CS2Hs/

Answer 1

此处其他解决方案的替代方法是简单地将margin-left添加到.comment-body。将设定宽度应用于.comment-date

也会有所帮助

.comment-date { 
  float: left;     
  font-weight: bold;    
  width: 90px;
}
.comment-body {
  margin-left: 90px;
}

这将确保.comment-body中的文字不会显示在日期下方。

这是一个演示：

--- jsFiddle DEMO ---

Answer 2

body块不在float模型中。只需为float: left设置.comment-body。此外，您可以使用一些宽度。请参阅：http://jsfiddle.net/CS2Hs/3/

Answer 3

我会尽力了解你的问题。据我了解，您希望.comment-body位于右侧，.comment-date位于左侧，但位于同一条线上。

如果我是对的，也许这会有效：

.comment-date {
    display: inline-block;
    float: left;
    width: 15%;
    font-weight: bold;
}
.comment-body {
    display: inline-block;
    float: right;
    width: 85%;
}

我为你做了一个JSFiddle;）

Answer 4

jsfiddle现在似乎已经失败了很抱歉如果这不起作用/不是你想要的但是你尝试将“overflow：hidden”添加到“comment-body”？这将创建一个新的布局上下文，阻止文本在下面包装。我发现这非常有用！希望有所帮助！

如何防止文本在浮动到左侧的元素下包裹？

4 个答案: