缩小网格布局中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>

​

浏览器支持

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

一些最新的浏览器版本，如Safari8和IE10，都需要vendor prefixes。

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

更多详细信息，请访问this answer。

CSS网格

​

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-row-start
• grid-column-start
• grid-row-end
• grid-column-end

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

对CSS Grid的浏览器支持

• Chrome -截至2017年3月8日的完全支持(版本57)
• Firefox -截至2017年3月6日的完全支持(版本52)
• Safari -截至2017年3月26日的完全支持(版本10.1)
• 边缘-截至2017年10月16日的完全支持(版本16)
• IE11 -不支持当前规格；支持废弃版本

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

Answer 3

Bootstrap的方法是在第二个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