Html 3列响应式布局

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

“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>

区块1
区块2
区块3
区块4
区块5
区块6
区块7

---

提前感谢。

您可以使用flexbox位置，例如

注意：对于某些浏览器，您可能需要指定不同的语法，请参阅

---

输出

---

使用网格系统。这就是Twitter引导网格系统如何为超小型和中型设备工作。您可以通过添加必要的类引用（例如“col-xs-12”）来定义列在不同屏幕宽度下的宽度

.container{
右边填充：16px；
左侧填充：16px；
右边距：自动；
左边距：自动；
/*-webkit过渡：宽度0.5s；
-moz过渡：宽度0.5s；
-o型过渡：宽度0.5s；
过渡：宽度0.5s*/
}
.容器液体{
右边填充：16px；
左侧填充：16px；
右边距：自动；
左边距：自动；
}
.行{
右边距：-16px；
左边距：-16px；
}
考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考生考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考考D-md-8，.col-lg-8、.col-xs-9、.col-sm-9、.col-md-9、.col-lg-9、.col-xs-10、.col-md-10、.col-lg-10、.col-xs-11、.col-md-11、.col-lg-11、.col-xs-12、.col-sm-12、.col-lg-12{
最小高度：1px；
右边填充：16px；
左侧填充：16px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.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{
浮动：左；
}
.col-xs-12{
宽度：100%；
}
.col-xs-11{
宽度：91.666.7%；
}
.col-xs-10{
宽度：83.33333%；
}
.col-xs-9{
宽度：75%；
}
.col-xs-8{
宽度：66.6667%；
}
.col-xs-7{
宽度：58.33333%；
}
.col-xs-6{
宽度：50%；
}
.col-xs-5{
宽度：41.666.7%；
}
.col-xs-4{
宽度：33.33333%；
}
.col-xs-3{
宽度：25%；
}
.col-xs-2{
宽度：16.666.7%；
}
.col-xs-1{
宽度：8.33333%；
}
@介质（最小宽度：900px）{
.集装箱{
宽度：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{
浮动：左；
}
.col-md-12{
宽度：100%；
}
.col-md-11{
宽度：91.666.7%；
}
.col-md-10{
宽度：83.33333%；
}
.col-md-9{
宽度：75%；
}
.col-md-8{
宽度：66.6667%；
}
.col-md-7{
宽度：58.33333%；
}
.col-md-6{
宽度：50%；
}
.col-md-5{
宽度：41.666.7%；
}
.col-md-4{
宽度：33.33333%；
}
.col-md-3{
宽度：25%；
}
.col-md-2{
宽度：16.666.7%；
}
.col-md-1{
宽度：8.33333%；
}
}
.街区{
背景色：#eee；
填充：10px；
利润率：10px；
}

区块1
区块2
区块3
区块4
区块5
区块6
区块7

既然你用引导标记了你的问题，为什么不直接使用引导网格呢？不需要额外的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>

---

您可以选择此功能，查看适度网格并定制您自己的网格系统。非常感谢！一个问题。。。如何在div之间添加20px的填充？我在想：第一块和第三块：10px右填充；第二和第四：10px左填充；块5:10px右；块6:10px左右；block 7:10px还剩？再一次，非常感谢，非常好用。最后一件事：如果我添加块8，它将居中显示（在块6下）。是否可以使其向左浮动（在第5栏下）？请在问题中也说明这一点，因为后面的答案可能需要提前知道这一点

<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>