当水平调整页面大小时(缩小其宽度),第 3 部分应移动到第 2 部分下方(并且只有在那之后它们才形成单列)。 这在视觉上更容易解释。我的目标是:
(1: full width)
1111 2222 3333
1111
(2: half width - the part I'm having trouble with)
1111 2222
1111 3333
(3: min width)
1111
1111
2222
3333
这是一个 fiddle以我为例。 如您所见,在半宽处,第 2 部分和第 3 部分立即移动到第 1 部分下方 - 没有第 3 个首先移动到第 2 个下方!关于如何解决此问题的任何见解?
最佳答案
您可以使用 media query
来检查半宽(例如 768px),将子 block (第 2 和 3 列)的显示更改为 display: block
示例 https://jsfiddle.net/robinhuy/pp04Lmh4/1/
.block {
display: inline-block;
}
.p2 {
padding: 2px;
}
.vtop {
vertical-align: top;
}
@media (max-width: 768px) {
.child-block {
display: block;
}
}
<div class="block">
<div class="block p2">
<div>1111111111111111111111</div>
<div>1111111111111111111111</div>
<div>1111111111111111111111</div>
<div>1111111111111111111111</div>
<div>1111111111111111111111</div>
<div>1111111111111111111111</div>
</div>
<div class="block vtop">
<div class="block p2 child-block">
<div>22222222222222222222</div>
<div>22222222222222222222</div>
<div>22222222222222222222</div>
</div>
<div class="block p2 child-block">
<div>333333333333333333333</div>
<div>333333333333333333333</div>
<div>333333333333333333333</div>
</div>
</div>
</div>
关于html - 调整页面大小时更改内联元素的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43928525/