允许内联块元素在堆叠前包装。
允许内联块元素在堆叠前包装。
提问于 2015-11-24 19:14:26
在使用inline-block显示的两个div旁边有两个div。当视口缩小时，我希望最左边的div中的文本在div垂直折叠之前进行包装，但我似乎无法做到这一点。JSFiddle在这里。
在演示中，当视口缩小时，“应该在块中停留”被推到标题块下面，而我希望“我想包装的大量文本”开始包装，以使两个块保持在一行上。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-24 21:26:30
使用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>
检查更新后的小提琴在这里。
Stack Overflow用户
发布于 2015-11-24 19:29:13
你不能让它们填满身体或容器，给它们50%的宽度吗？
.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%保留内联块。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33907895
复制相关文章
相似问题
腾讯云开发者
