Question

我正在尝试构建响应式布局：

小视口（例如max-width 750px）：

    +---------------+
    |      1        |
    +----+-----+----+
    |  2 |     |    |
    +----+  4  |  5 |
    |  3 |     |    |
    +----+-----+----+

大视口（最小宽度751像素）：

    +---+---+---+---+
    | 1 |   |   |   |
    +---+ 3 | 4 | 5 |
    | 2 |   |   |   |
    +---+---+---+---+

我尝试使用flex，display：table等。我找到的唯一解决方案是复制标记，但这并不理想。还有其他可能吗？

框具有可变长度的文本内容，因此遗憾的是固定高度不是一种选择。

Answer 1

＆＃13;

.header{
  width:100%;
  height:100px;
  border:1px solid #ff9900;
}
.l1,.l2{
  width:33%;
  float:left;
  border:1px solid green;
  height:100px;
  margin-right:1px;
}
.l3{
  float:right;
  width:32%;
  height:100px;
  border:1px solid red;
}
.a1,.a2,.a3,.a4{
  width:24%;
  float:left;
  border:1px solid green;
  height:100px;
  margin-right:1px;
}

＆＃13;

<div class="header">
<h1>header</h1>
</div>
<div class="body">
<div class="l1">
  <div style="width:100%; height:50%; background:#ff8800;">1</div>
  <div style="width:100%; height:50%; background:#ffff00;">2</div>
  </div>
  <div class="l2">3</div>
  <div class="l3">4</div>
</div>
<br/>
This Is Next Lay Out

<div class="header">
<h1>header</h1>
</div>
<div class="body">
<div class="a1">
  <div style="width:100%; height:50%; background:#ff8800;">1</div>
  <div style="width:100%; height:50%; background:#ffff00;">2</div>
  </div>
  <div class="a2">3</div>
  <div class="a3">4</div>
  <div class="a4">5</div>
</div>

＆＃13;

尝试一次

Answer 2

我是使用flexbox和position: relative完成的。

<强> Working Fiddle

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
}
.box {
  box-shadow: inset 0px 0px 0px 1px #ccc;
  flex: 1;
  height: calc(100% / 3);
  line-height: 150px;
  text-align: center;
  position: relative;
}
.one {
  flex: 1 0 100%;
}
.two,
.four,
.five,
.six {
  flex: 1 0 calc(100% / 3);
  /*   min-width: calc(100% / 4) */
}
.four,
.five,
.six {
  height: calc(200% / 3);
}
.three {
  order: 1;
  max-width: calc(100% / 3);
  top: calc(-100% + (200% / 3));
}
@media (max-width: 500px) {
  .one {} .one,
  .two,
  .three,
  .four,
  .five {
    flex: 1 0 calc(100% / 4);
    max-width: calc(100% / 4);
    top: 0px;
  }
  .one,
  .two {
    height: calc(100% / 2);
  }
  .three,
  .four,
  .five {
    height: 100%;
  }
  .two {
    order: 1;
    top: calc(-100% / 2);
  }
  .three {
    order: 0;
  }
}

<div class="parent">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
  <div class="box five">5</div>
</div>

CSS响应水平和垂直布局

2 个答案: