html - 调整页面大小时更改内联元素的行为

Question

当水平调整页面大小时(缩小其宽度)，第 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 个下方!关于如何解决此问题的任何见解？

Answer 1

您可以使用 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>