响应式布局，3列

Question

我正在尝试使用以下布局设计我博客的主页：

“container”是一个响应式div，它根据屏幕宽度改变宽度。黄色块是文章的预览（图像和标题）。我希望前四个块更大，并以2列样式显示。从块＃5开始，它们需要更小并分成三列。

现在前四个很容易，我只是将＃1和＃3对齐到左边，然后将＃2和＃4对齐到右边。但是我如何设计3柱部分的样式呢？请记住，那些实际上不是列，代码是这样的：

<div id="container">
  <div>block1</div>
  <div>block2</div>
  <div>block3</div>
  <div>block4</div>
  <div>block5</div>
  <div>block6</div>
  <div>block7</div>
</div>

提前致谢。

Answer 1

您可以使用flexbox位置，例如

http://codepen.io/anon/pen/WbzojM

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


#container {
  display: flex;
  flex-wrap: wrap;

  /* align boxes on the left when they don't fill an entire row */
  justify-content: flex-start;
}

#container > div {
    border: 1px #ccc solid;
    height: 50px;
    margin: 10px;
}

#container div {
  width: -webkit-calc(50% - 20px);
  width: -moz-calc(50% - 20px);
  width: calc(50% - 20px);
}

#container div:nth-child(n + 5) {
  width: -webkit-calc(33.33% - 20px);
  width: -moz-calc(33.33% - 20px);
  width: calc(33.33% - 20px);
}

注意：对于某些浏览器，您可能需要指定其他语法，请参阅http://caniuse.com/#feat=flexbox

---

输出

Answer 2

使用网格系统。这就是Twitter Bootstrap网格系统适用于超小型和中型设备的方式。您可以通过添加必要的类引用来定义列在不同屏幕宽度下的宽度。 ＆＃39; COL-XS-12＆＃39;

＆＃13;

＆＃13;

.container {
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
  /*-webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;*/

}
.container-fluid {
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -16px;
  margin-left: -16px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  min-height: 1px;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
@media (min-width: 900px) {
.container {
  width: 970px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  float: left;
}
.col-md-12 {
  width: 100%;
}
.col-md-11 {
  width: 91.66666667%;
}
.col-md-10 {
  width: 83.33333333%;
}
.col-md-9 {
  width: 75%;
}
.col-md-8 {
  width: 66.66666667%;
}
.col-md-7 {
  width: 58.33333333%;
}
.col-md-6 {
  width: 50%;
}
.col-md-5 {
  width: 41.66666667%;
}
.col-md-4 {
  width: 33.33333333%;
}
.col-md-3 {
  width: 25%;
}
.col-md-2 {
  width: 16.66666667%;
}
.col-md-1 {
  width: 8.33333333%;
}
}
.block {
  background-color: #eee;
  padding: 10px;
  margin: 10px;
  
}

＆＃13;

<div id="container">
  <div class="col-xs-12 col-md-6"><div class="block">Block1</div></div>
  <div class="col-xs-12 col-md-6"><div class="block">Block2</div></div>
  <div class="col-xs-12 col-md-6"><div class="block">Block3</div></div>
  <div class="col-xs-12 col-md-6"><div class="block">Block4</div></div>
  <div class="col-xs-12 col-md-4"><div class="block">Block5</div></div>
  <div class="col-xs-12 col-md-4"><div class="block">Block6</div></div>
  <div class="col-xs-12 col-md-4"><div class="block">Block7</div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

由于您使用Bootstrap标记了您的问题，为什么不使用Bootstrap网格？不需要额外的CSS。

<div class="col-xs-6">    </div>
<div class="col-xs-6">    </div>
<div class="col-xs-6">    </div>
<div class="col-xs-6">    </div>
<div class="col-xs-4">    </div>
<div class="col-xs-4">    </div>
<div class="col-xs-4">    </div>
<div class="col-xs-4">    </div>
<div class="col-xs-4">    </div>
<div class="col-xs-4">    </div>
<div class="col-xs-4">    </div>
<div class="col-xs-4">    </div>
<div class="col-xs-4">    </div>

http://bootply.com/qujivH7vXb