twitter-bootstrap - 缩小网格布局中 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 弹性盒

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>

浏览器支持

除了 IE < 10 之外，所有主流浏览器都支持 Flexbox 。

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。

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

此答案中的更多详细信息。

---

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

Answer 3

Bootstrap 方法是简单地pull-right在第二个 DIV 上使用...

<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