Div的复杂对齐

Question

这里出现了一种情况，其中两个div必须从Database设计。

我正在尝试将两个div对齐如下：

是否可以使用bootstrap的CSS类col-？ 在响应模式下，它应该以平板电脑模式查看，如下所示：

注意：1。仅尝试使用CSS完成 2. Div 1 ＆amp; Div 2 属于单一Div

Answer 1

我用新类和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，因为您可以在显示元素时轻松操作顺序/布局。

.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

，参考哪些浏览器有效