Div 的复杂对齐

Question

这里出现了一种情况，两个div 必须从数据库设计。

我正在尝试按如下方式对齐两个 div：

是否可以使用 bootstrap 的 CSS class col-?
在响应模式下，它应该在 平板电脑模式 中看起来如下：

注意：1. 尝试仅使用 CSS 来完成。
2. Div 1 & Div 2下单Div

Answer 1

我用新的 class 和 css

更新了答案

css

@media (max-width: 1027px) {
 .div1 {
    margin-right: 2px;
  }

}

Html

<div class="container-fluid">

  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 div1" style="background-color:lavender;">div 1</div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 div3" style="background-color:lavenderblush;">div 3</div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 div2" style="background-color:lavender;">div 2</div>
  </div>
</div>

Answer 2

最好的解决方案是使用 CSS flexbox，因为您可以在显示元素时轻松地操纵 order/layout。

.container-div {
display: flex;
flex-direction: column;
}

.item-div-1 {
order: 1;
...
}

.item-div-2 {
order: 3;
...
}

.item-div-3 {
order: 2;
...
}

您可以在 CSS-Tricks: A guide to flexbox 找到有关特定弹性框属性的更多信息。唯一要记住的是确保检查浏览器兼容性。我相信 I.E.-8 及以下版本不支持。

Answer 3

决定重新为您解答。

Flexbox 是一种很好的利用和定位东西的方式，基本上正是您正在寻找的用 flexbox 制作的东西。宽度等可能需要修补来完善它，但这将是整体完成：

aside {
  background: yellow;
}

main {
  background: blue;
}

footer {
  background: pink;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

footer {
  flex-basis: 100%;
}

aside {
  flex-basis: 300px;
}

main {
  flex: 1;
}

<div class="container">
  <aside>
    some text here
  </aside>
  
  <main>
    more text here
  </main>
  
  <footer>
    footer text
  </footer>
</div>

现在几乎所有浏览器都支持 Flexbox，因此您在作品中使用它不会有任何问题，我经常使用它。以下是您可以使用 Flexbox 执行的操作的参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

更新：您可以通过访问以下内容来了解在什么浏览器上的工作原理：http://caniuse.com/#search=flexbox

Div 的复杂对齐

Complex Alignment of Divs

html

css

twitter-bootstrap

responsive