div之间的网格框移位

Question

我正在尝试使用css制作迷你网格布局。但我有div的问题。我在此 demo 页面中尝试了此操作。而且我没有得到我想要的形状。我想让它像截图

我试试这个CSS代码：

.div {
  position:relative;
  float:left;
  width:100%;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background-color:#1d1f20;
}

.div:nth-child(1){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(2){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(3){
  width:400px;
  padding-top:400px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(4){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(5){
  width:365px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}

.div:nth-child(6){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}

HTML

<div class="container">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
</div>

如何在css中获取屏幕截图？有人可以帮我吗？

Answer 1

您可以使用很多解决方案：

解决方案一：

使用新的column-count。的 DEMO

Check浏览器兼容性。

解决方案二：

使用display:inline-block;。的 DEMO

Check浏览器兼容性。

解决方案三：

使用flexbox。的 DEMO

Check浏览器兼容性。

解决方案四：

使用JQuery，我建议你使用Masonry插件（通常用于画廊）。 DEMO

Answer 2

我不确定这是否是您要找的内容，我不得不重新构建您的html，以获取以下链接：http://codepen.io/saa93/pen/ENjNgy

<style>
body,html {
  padding:0px;
  margin:0px;
  width:100%;
  height:100%;
}
.container {
  position:relative;
  width:100%;
  max-width:1010px;
  min-height:400px;
  margin:0px auto;
}

.div {
  position:relative;
  float:left;
  width:100%;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background-color:#1d1f20;
}

.div:nth-child(1) {
  background: transparent none repeat scroll 0 0;
  float: left;
  width: 370px;
}


.div:nth-child(3){
  width:180px;
  float:left;
}
.div:nth-child(1) > .div:nth-child(1){
  background-color:#1d1f20;
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(2){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(3) {
  margin-bottom: 5px;
  margin-right: 5px;
  padding-top: 185px;
  width: 365px;
}

.div:nth-child(2) {
  margin-bottom: 5px;
  margin-right: 5px;
  padding-top: 370px;
  width: 400px;
}
.div:nth-child(3) > .div:nth-child(1){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}

.div:nth-child(3) {
  float: left;
  width: 180px;
}
.div:nth-child(3) > .div:nth-child(2){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}

</style>
<div class="container">
  <div class="div">
        <div class="div"></div>
        <div class="div"></div>
        <div class="div"></div>
   </div>
  <div class="div"></div>


  <div class="div">
    <div class="div"></div>
  <div class="div"></div>
  </div>
</div>

我希望这会有所帮助：）