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），将子块（第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>

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

1 个答案: