0

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

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

4

4 回答 4

2

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

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

这将确保文本.comment-body不会出现在日期下方。

这是一个演示：

--- jsFiddle 演示 ---

于 2012-08-16T01:52:25.520 回答
0

主体块不在浮动模型中。只需设置一个float: leftfor .comment-body。此外，您可以使用一些宽度。见：http: //jsfiddle.net/CS2Hs/3/

于 2012-08-16T01:44:35.793 回答
0

我会试着理解你的问题。据我了解，您希望 位于.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 ;)

于 2012-08-16T01:45:46.333 回答
0

jsfiddle 目前似乎已关闭，如果这不起作用/不是您想要的，那么很抱歉，但是您是否尝试将“overflow：hidden”添加到“comment-body”？这将创建一个新的布局上下文，阻止文本在下面换行。我发现这非常有用！希望有帮助！

于 2013-11-12T09:56:22.317 回答