三列div布局设计，可调

Question

我想知道如何设计三列 div 布局，其尺寸可调节，如在图像中显示。

• 当桌面大小 (770px) 第一列有两个 div 而其他列有一个 div。

• 当平板电脑大小 (600px) 第一列有三个 div 而其他有一个 div。它有两列。

• 当移动尺寸（小于 600 像素）时，所有 div 都有一列。

请在图片中找到带有颜色的订单。这是没有任何适当样式的示例代码。

HTML：

<div class="body">
  <div class="c1">blue</div>
  <div class="c2">pink</div>
  <div class="c3">green</div>
  <div class="c4">yellow</div>
</div>

CSS：

@media only screen and (min-width: 0px) {
  .c1 { width:100%; }
  .c2 { width:100%; }
  .c3 { width:100%; }
  .c4 { width:100%; }
}
@media only screen and (min-width: 600px) {
  .c1 { width:25%; }
  .c2 { width:25%; }
  .c3 { width:75%; }
  .c4 { width:25%; }
}
@media only screen and (min-width: 768px) {
  .c1 { width:25%; }
  .c2 { width:25%; }
  .c3 { width:50%; }
  .c4 { width:25%; }
}

我用 CSS 中的 order 属性尝试了这个，但它不能正常工作。

Answer 1

您缺少一些样式来使布局正常工作。我假设由于您的源顺序和布局的变化，您在使中间图与其他两个图相匹配时遇到了一些麻烦。这是我为您的媒体查询选择的 CSS：

@media only screen and (min-width: 0px) {
.c1{ width:100%; min-height:5vh; }
.c2{ width:100%; min-height:5vh; }
.c3{ width:100%; min-height:80vh;}
.c4{ width:100%; min-height:10vh;}
}
@media only screen and (min-width: 600px) {
.c1{ width:50%; min-height:10vh; float:left; }
.c2{ width:50%; min-height:10vh; float:left; clear:left;}
.c3{ width:50%; min-height:80vh; position:absolute;right:0;}
.c4{ width:50%; min-height:10vh; float:left; clear:left;}
}
@media only screen and (min-width: 768px) {
.c1{ width:25%;}
.c2{ width:25%; float:right;clear:right;}
.c3{ width:50%; left:25%;}
.c4{ width:25%;}
}

演示代码：
http://codepen.io/anon/pen/KrQxLq