如何在没有js

Question

问题

我有一个2列布局，其中左列包含元素1和5，右列包含2,3和4。

在手机屏幕上，我希望只有一个列，其中订单为1,2,3,4和5：

Desktop               Mobile

┌───────┬───────┐     ┌───────┐
│     1 │     2 │     │     1 │
├───────┼───────┤     ├───────┤
│     5 │     3 │     │     2 │
│       ├───────┤     ├───────┤
└───────┤     4 │     │     3 │
        └───────┘     ├───────┤
                      │     4 │
                      ├───────┤
                      │     5 │
                      │       │
                      └───────┘

一些要求：

• 我事先并不知道箱子的高度
• 可能是所有盒子都有不同的高度
• 我不想改变他们的身高
• 左侧或右侧可能更高

我知道我可以用flex重新排序元素。我也知道我可以用flex创建cols和rows，但是所有元素都有动态高度。有没有办法在不使用js的情况下实现这种效果？

示例代码

没有flex的演示

这里的问题是移动屏幕上的订单不正确。

＆＃13;

＆＃13;

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.container .left, .container .right {
  width: 50%;
}
@media screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
  }
  .container .left, .container .right {
    width: 100%;
  }
}
.container .box {
  border: 1px solid black;
  width: 100%;
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
}
.container .box.a {
  height: 80px;
}
.container .box.b {
  height: 150px;
}
.container .box.d {
  height: 80px;
}

＆＃13;

<div class="container">
  <div class="left">
    <div class="box a"><span>1 - static height</span></div>
    <div class="box b"><span>5 - dynamic height</span></div>
  </div>
  <div class="right">
    <div class="box c"><span>2 - dynamic height</span></div>
    <div class="box d"><span>3 - dynamic height</span></div>
    <div class="box e"><span>4 - dynamic height</span></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用flex

进行演示

这里的问题是容器需要具有正确的高度，但由于每个框的高度由其内容决定，我无法知道正确的高度。

＆＃13;

＆＃13;

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box {
  width: 100%;
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
  .container {
    /* This is assumed for demonstration-purposes.
    // I don't know that height in advance. I just set
    // it to smth. so that exactly 1 and 5 are fitting
    // into the left col */
    height: 170px;
  }
  
  .box {
    width: 50%;
  }
  
  .b {
    order: -1;
  }
  
  .a {
    order: -2;
  }
}

＆＃13;

<div class="container">
    <div class="box a"><span>1 - static height</span></div>
    <div class="box c"><span>2 - dynamic height</span></div>
    <div class="box d"><span>3 - dynamic height</span></div>
    <div class="box e"><span>4 - dynamic height</span></div>
    <div class="box b"><span>5 - dynamic height<br>foo<br>foo<br>foo<br>foo<br>foo</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

也许这样的事情对你有用：

html{
  box-sizing:border-box;
}
*,
:after,
:before{
  box-sizing:inherit;
}

.box {
  border: solid 1px pink;
  padding: 10px;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
}
.a {
  order: 0;
}
.wrapper {
  order: 1;
}
.e {
  order: 2;
}


@media screen and (min-width: 1024px) {
  .container {
    display: block;
  }
  .a,
  .e {
    float: left;
    width: 50%;
  }
  .wrapper {
    width: 50%;
    float: right;
  }

  .b,
  .c,
  .d {
    width: 100%;
  }
  
}

<div class="container">
  <div class="wrapper">
    <div class="box b"><span>2 - dynamic height</span></div>
    <div class="box c"><span>3 - dynamic height</span></div>
    <div class="box d"><span>4 - dynamic height</span></div>
  </div>
  <div class="box a"><span>1 - static height</span></div>
  <div class="box e"><span>5 - dynamic height<br>foo<br>foo<br>foo<br>foo<br>foo</span></div>
</div>