避免换行，除非有必要使用CSS

是否可以使用CSS自动控制换行，以便在调整浏览器窗口大小时发生以下情况：

• 当s1和s2都可以安装在div内时，它们保持在同一条线上
• s2下降到第二行，因为它们在没有包装的情况下无法同时安装
• s2在无法再装入div时进行包裹

HTML:

Lorem ipsum dolor：
坐在我的位子上

因此，有三种可能的观点：

1：

Lorem ipsum dolor：坐在阿梅特·康塞特图的旁边

2：

Lorem ipsum dolor:
坐在我的位子上

3：

Lorem ipsum dolor:
坐在阿梅特康塞特图
告别伊莱

s1中的单词总是相同的，但s2中的单词可能会有所不同，因此我不能仅根据页面宽度更改

空白：nowrap

浏览器支持并不是一个大问题，只要它在Chrome和/或Firefox上运行就可以了

这里有一个简单的方法，您可以使用。

只需将s2（或者，可以选择将s1和s2都设置为内联块）：

#s2 {
    display: inline-block;
}

这样，当有足够的空间时，整个s2框可以与s1在同一行上流动，然后按照第二点中的说明进行换行，然后按照第三点中的说明进行换行（因为内联块在调整大小和换行其内容时的行为类似于容器块元素）。如果您感兴趣，请在中详细说明

另一种方式：

display: block;
float: left;

而且别忘了给父元素一个清晰的补丁

---

您的clearfix在旧的IEs中不起作用，如果您已经在使用

overflow:hidden

，则不需要它。事实上，没有必要对我的答案进行修改，因为旧IE实际上支持自然内联元素（如

span

）上的

display:inline block

。是的，这是真的。我为ie8和更高版本添加了“最新”的clearfix方法。

display: block;
float: left;