关闭网格布局中div之间的差距

Question

我可以在div-1下面显示div-3吗？

.div-1{ float:left; width:50%; background:red; height:100px;}
.div-2{ float:left; width:50%; background:green; height:300px;}
.div-3{ float:left; width:50%; background:blue; height:200px;}

设计截图：

Answer 1

你可以。

.div-1{ float:left; width:50%; background:red; height:100px;}
.div-2{ float:right; width:50%; background:green; height:300px;}
.div-3{ float:left; width:50%; background:blue; height:200px;}

Answer 2

CSS Flexbox

section {
  display: flex;
  flex-flow: column wrap;
  height: 300px; /* necessary to force a wrap (value based on height of items) */
}

.div-1 {
  order: 1;
  height: 100px;
  width: 50%;
  background: red;
}

.div-2 {
  order: 3;
  height: 300px;
  width: 50%;
  background: green;
}

.div-3 {
  order: 2; /* remove from source order and display second */
  height: 200px;
  width: 50%;
  background: blue;
}

<section>
  <div class="div-1"></div>
  <div class="div-2"></div>
  <div class="div-3"></div>
</section>

浏览器支持

所有主流浏览器except IE < 10都支持Flexbox。

最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。

要快速添加前缀，请使用Autoprefixer。

this answer中的更多详情。

CSS Grid

section {
  display: grid;
  grid-template-columns: 1fr 1fr; /* distribute container space evenly between
                                     two columns */
 }

.div-1 {
  grid-area: 1 / 1 / 2 / 2;       /* see note below */
  height: 100px;
  background: red;
}

.div-2 {
  grid-area: 1 / 2 / 3 / 3;
  height: 300px;
  background: green;
}

.div-3 {
  grid-area: 2 / 1 / 3 / 2;
  height: 200px;
  background: blue;
}

<section>
  <div class="div-1"></div>
  <div class="div-2"></div>
  <div class="div-3"></div>
</section>

grid-area简写属性按以下顺序解析值：

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

请注意逆时针方向，与margin和padding相反。

CSS网格的浏览器支持

• Chrome - 完全支持截至2017年3月8日（第57版）
• Firefox - 完全支持截至2017年3月6日（第52版）
• Safari - 完全支持截至2017年3月26日（版本10.1）
• Edge - 截至2017年10月16日（第16版）的全面支持
• IE11 - 不支持当前规范;支持过时版本

以下是完整图片：http://caniuse.com/#search=grid

Answer 3

引导方式是在第二个DIV上使用pull-right ...

<section>
  <div class="div-1"></div>
  <div class="div-2 pull-right"></div>
  <div class="div-3"></div>
</section>

http://www.codeply.com/go/Cj0pAGoSxG