Question

我有两个使用inline-block显示的div。随着视口缩小，我希望最左边的div中的文本在 div之前包裹垂直崩溃，但我似乎无法实现这一点。 JSFiddle here

在演示中，当视口缩小时＃34;应该留在块中＃34;被推到标题栏下面，而我喜欢＆＃34;我要包装的很多文字＆＃34;开始包装以保持两个块在同一条线上。

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

Answer 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％保留内联块

允许内联块元素在堆叠之前进行换行

2 个答案: