允许 inline-block 元素在堆叠之前换行答案

【问题标题】：Allow inline-block elements to wrap before stacking允许 inline-block 元素在堆叠之前换行
【发布时间】：2015-11-25 13:26:30
【问题描述】：

我有两个相邻的 div，它们使用 inline-block 显示。随着视口的缩小，我希望最左边的 div 中的文本在 div 垂直折叠之前包裹起来，但我似乎无法做到这一点。 JSFiddle here.

在演示中，当视口缩小时，“应该留在块中”被推到标题块下方，而我希望“我想要换行的大量文本”开始换行以保持两个块相同行。

【问题讨论】：

你可以move it above。
@Jake 对不起，我想我不清楚。我要他们待在一起。我只希望调整大小时的行为是最左边的文本换行，而不是在原始行的大小太小时立即将它们放在另一个之上。
我认为你需要使用 float: left 而不是 display: inline-block 。
@DarrenS 我最初尝试过，但遇到了类似的问题。
@aardvarkk, this 不是最好的，但似乎可以满足您的要求。我建议使用诸如引导程序之类的框架或类似的框架来创建站点旁边的容器和框彼此

标签： html css

【解决方案1】：

使用display: table-cell; 而不是display:inline-block 将解决您的问题。

.title { 
    display: table-cell; 
    vertical-align: top;
}
.box {
    display: table-cell; 
    vertical-align: top;
}

<div class="title">
    <h1>Hi</h1>
    <h2>Lots of text I want to wrap</h2>
</div>
<div class="box">
    Should stay in a block
</div>

检查您更新的Fiddle Here.

【讨论】：

我认为这是最接近我想要达到的效果，因为您可以为一个表格单元格设置一个固定的宽度，并让另一个表格单元格随着屏幕变小而调整以填充。这是一个很好的解决方案，因为 HTML 保持语义 - 从 CSS 的角度来看，您只需将其视为表格。谢谢。

【解决方案2】：

你不能让它们填满身体或容器，给它们 50% 的宽度吗？
JSfiddle
编辑：JSfiddle with a wrapper

.title { 
    display: inline-block; 
    vertical-align: top;
    background-color:red;
    width:50%;
}
.box {
    display: inline-block; 
    vertical-align: top;
    background-color:blue;
    width:50%;
}

<div class="title">
    <h1>Hi</h1>
    <h2>Lots of text I want to wrap</h2>
</div><div class="box">
    Should stay in a block
</div>

编辑：记住不要在第一个 div 之后换行，并确保没有空格 </div><div class="box"> 以便您可以使用 50% 保留内联块

【讨论】：

这很有趣。我从中得到的是，我实际上需要在“标题”类上设置一个宽度，以便它可以调整大小。这不是我所期望的！
如果你不给 div 一个宽度，它会随着文本的变大而变大。身高也一样！
感谢您的建议。我选择了另一个响应作为“正确”答案，因为它允许我为一个框设置定义的宽度，只让另一个框调整。您在这里的解决方案需要将两个框都设置为百分比宽度，这并不是我想要的。在 HTML 中解决看似简单的布局问题是多么困难，这令人沮丧！