三列div布局设计，可调 [英] Three columns div layout design with adjustable

问题描述

我想知道如何设计可调整的三列div布局，例如在图像中显示等.

I want to know how to to design three column div layout with adjustable in deference sizes like showing in image.

• 当桌面尺寸(770px)时，第一列有两个div，其他列有一个div.

• When desktop size (770px) first column have two div and others have one divs.

当平板电脑尺寸(600像素)时，第一列为三个div，其他列为一个div.它有两列.

When tablet size (600px) first column have three divs and other have one div. It has two columns.

当移动设备尺寸(小于600像素)时，所有div都有一列.

When mobile size (less than 600px) all divs have one columns.

请在图像中找到带有颜色的顺序.这是示例代码，没有任何适当的样式.

Please find the order with colors in image. This is sample code without any proper styles.

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属性尝试了此操作，但是它无法正常工作.

I tried this with order property in CSS, but its not working properly.

推荐答案

您缺少一些使布局正常工作的样式.我假设由于您的源顺序和布局更改，使中间图与其他两个图相适应时遇到了一些麻烦.这是我为您的媒体查询选择的CSS:

You were missing some styles to make the layout work. I'm assuming you had some trouble making the middle diagram fit with the other two because of your source order and the change in layout. Here's the CSS I picked for your media queries:

@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%;}
}

演示codepen:
http://codepen.io/anon/pen/KrQxLq

Demo codepen:
http://codepen.io/anon/pen/KrQxLq

这篇关于三列div布局设计，可调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！