CSS：使用引导程序创建特定布局答案

【问题标题】：CSS: creating a certain layout using bootstrapCSS：使用引导程序创建特定布局
【发布时间】：2014-12-21 01:56:17
【问题描述】：

我正在尝试使用引导程序创建特定布局：

但无法在我的布局中实现 2 个主要原则：

在第一行中，div 2 应该“粘”在其列的底部（在 div1 的高度上中继）。
在第二行，我想在中心对齐 3 个 div（使用引导网格系统时！）

编辑： 关于第二行：我尝试使用 3 列让我们说每个 div 使用 3-col（因为我想要左右边距），但我的偏移量仍然为 3更多的我不能平均分配。所以我决定将其更改为带有边距容器的 col-4，这就是我的解决方案：

<div class="container" style="padding: 0 80px;">
<div class="row">
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div1</div>
    </div>
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div2</div>
    </div>
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div3</div>
    </div>
</div>
</div>

http://jsfiddle.net/tomico/y7xesq6v/

希望有人能解释一下我该如何处理这两个问题

【问题讨论】：

2.使用传统的包装方法，使用自动边距居中，并使用其中的网格系统，因此每个 div 的宽度为 4 列（共 12 列）。或者，您可以使用偏移类。
1.使用各种技术均衡列。（谷歌）。然后你可以在最小宽度处使用绝对位置来获得底部的 div2。 2. 建议创建另一个包装器（如@MatthewRath）。因此，您可以在 .row 周围制作一个包装器，然后将该包装器设为 80%，然后使用自动边距将其居中。

标签： html css twitter-bootstrap

【解决方案1】：

这就够了吗？

.div1{position:relative;margin-top:20px;float:left;}
.div2{position:absolute;float:left;right:0px;top:40px;}

至于 3 div 行，我会用另一个 div 将这三个包裹起来，以使包含其他三个 div 的那个 div 居中。

    // Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

来自：Bootstrap Source

【讨论】：

我看不出你的解决方案与引导网格系统有什么关系（更具体地说是你的第二行解决方案）
第二个块是从网站复制的，第一个块是自定义css

【解决方案2】：

对于 .div2，您可以只使用带有 % 的 margin-top

       .div2 {margin-top:50%}

对于您的第二个问题，上面所说的将起作用，以下是代码的外观：

<div class="row">
                     <div class="wrap">
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div1</div>
</div>
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div2</div>
</div>
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div3</div>
</div>
   </div>

然后添加 CSS 进行换行

        .wrap {width:50% ; margin:0 auto } //or 800px or whatever

【讨论】：