我如何防止文本环绕在浮动于其左侧的元素下面？

Question

我有两个块元素。第一个浮在左边。我希望正确的元素也可以是方块，并保持其正方形形状。取而代之的是，其中的文本环绕在左侧浮动的元素下方。

.comment-date {
  float: left;
}

<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

主体块不在浮动模型中。只需将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目前似乎已关闭，很抱歉，如果这不起作用/不是您想要的，但是您是否尝试过在“ comment-body”中添加“ overflow：hidden”？这将创建一个新的布局上下文，该上下文将阻止文本在下面换行。我发现这非常有用！希望能有所帮助！