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

【问题标题】：How do I keep text from wrapping under an element which floats to its left?如何防止文本包裹在浮动到左侧的元素下？
【发布时间】：2020-05-11 03:59:28
【问题描述】：

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

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

【问题讨论】：

标签： html css css-float

【解决方案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 ---

【讨论】：

这是一个有趣的解决方案，但不幸的是我需要为日期字段设置精确的宽度。我希望该字段的宽度会增长到日期文本的大小。有用的答案，但不是理想的解决方案:)
在这种情况下，下面的解决方案之一是浮动两个元素或使用inline-block 是您的理想解决方案。我认为最好不要重复已经提供的答案。
不幸的是，所有这些回复都要求我设置宽度。并且它们需要 body 元素上的宽度，而您仅在日期上需要它。所以我目前最喜欢这个解决方案。
@Ben174 不需要在日期容器上设置宽度。 jsfiddle.net/CS2Hs/10
@Xander - 是的，但它仍然需要我/知道/日期容器的宽度才能选择左边距宽度。

【解决方案2】：

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

【讨论】：

我宁愿不必使用宽度。但我看不出没有他们的办法。我希望 body 元素填充页面的其余部分，但如果我使用的宽度不起作用。如果我使用百分比，我必须知道日期元素的伸展范围。
您可以考虑将它们相对于父容器定位，如下所示：jsfiddle.net/CS2Hs/8。这样评论正文宽度保持可变。
仍然需要我将其定位在左侧 110 像素处。如果日期增长到 200 像素怎么办？
如果您希望两者都具有可变宽度，您可以使用表格显示样式，如下所示：jsfiddle.net/CS2Hs/9。
很好！！这对你来说是不是有点像黑客攻击，还是完全可以接受的？

【解决方案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 ;)

【讨论】：

谢谢，但我正在寻找不需要我设置宽度的解决方案。我不知道这两个元素的宽度。我希望左边的增长以适应文本，而右边的增长来填充页面的其余部分。

【解决方案4】：

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

【讨论】：