如何保持文本不包含在浮动到其左边的元素下？ [英] How do I keep text from wrapping under an element which floats to its left?

问题描述

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

I have two block elements. The first is floated to the left. I'd expect the right element to be a block as well and retain its square shape. Instead, text within it is wrapping under the element which is floating to the left.

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文本在日期之下。我希望它保持块形状，浮动在日期的右边。我如何实现呢？

The lorem ipsum text wraps under the date. I'd expect it to retain a block shape, floating to the right of the date. How can I achieve that?

以下是一个小提琴：
http：// jsfiddle.net/CS2Hs/

推荐答案

这里的其他解决方案的替代方法是简单地添加 margin-left 至 .comment-body 。将设置宽度应用于 .comment-date

An alternative to the other solutions here would be to simply add a margin-left to .comment-body. It would also be helpful to apply a set width to .comment-date

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

这将确保 .comment-

This will ensure that the text in .comment-body does not appear underneath the date.

这是一个演示：

--- jsFiddle DEMO ---

这篇关于如何保持文本不包含在浮动到其左边的元素下？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！