缩小网格布局中 div 之间的间隙答案

【问题标题】：Close the gap between divs in a grid layout缩小网格布局中 div 之间的间隙
【发布时间】：2017-10-03 06:17:52
【问题描述】：

我可以在 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;}

设计截图：

【问题讨论】：

贴出你目前尝试过的代码

标签： twitter-bootstrap css flexbox css-grid

【解决方案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;}

【讨论】：

【解决方案2】：

CSS 弹性盒

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。

一些最新的浏览器版本，例如 Safari 8 和 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-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

【讨论】：

可以去掉截面高度吗？无法在我的网站上固定高度。
在 flexbox 中，容器需要有一个高度。否则，项目列没有理由换行。这就是为什么我还发布了一个网格解决方案，它不需要容器上的固定高度。
不适用于我的网站：artguide.pro/paris-guide 屏幕右侧 992 像素到 1199 像素。
你没有提到你正在使用 Bootstrap。这增加了一层复杂性。我编辑了您问题中的标签。也许 Bootstrap 专家会做出回应。

【解决方案3】：

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

【讨论】：