浮动顶部画廊，不使用位置

Question

我目前的实际结果：

我想在不使用require_dependency "subclass_a" require_dependency "subclass_b" .... 的情况下将蓝色<div>移至顶部，并删除其间的空格。这可能吗？

期望的结果：

这是我尝试过的：

position

#headerwrapper {
  width: 988px;
  height: 500px;
  margin: 0 auto;
  background: #000;
  padding: 10px 20px;
}
#header1 {
  width: 300px;
  height: 250px;
  float: left;
  margin-right: 25px;
  background: red;
}
#header2 {
  width: 300px;
  height: 450px;
  float: left;
  margin-right: 25px;
  background: red;
}
#header3 {
  width: 300px;
  height: 350px;
  float: left;
  margin-right: 25px;
  background: red;
}
#header4 {
  width: 300px;
  height: 350px;
  float: left;
  clear: left;
  margin-right: 25px;
  background: blue;
}

请注意，每行的项目数可能会有所变化（即，我不知道新行的开始位置）。

Answer 1

看起来你只需要一个负的上边距。它还可以帮助您将包装器转换为块元素，将其子元素转换为内联块元素。这样他们排队更好。

祝你好运！

＆＃13;

＆＃13;

#headerwrapper {
  width: 988px;
  height: 500px;
  margin: 0 auto;
  background: #000;
  padding: 10px 20px;
  display: block;
}
#header1 {
  width: 300px;
  height: 250px;
  float: left;
  margin-right: 25px;
  background: red;
  display: inline-block;
}
#header2 {
  width: 300px;
  height: 450px;
  float: left;
  margin-right: 25px;
  background: red;
  display: inline-block;
}
#header3 {
  width: 300px;
  height: 350px;
  float: left;
  margin-right: 25px;
  background: red;
  display: inline-block;
}
#header4 {
  width: 301px;
  height: 350px;
  float: left;
  clear: left;
  margin-top: -175px;
  margin-left: -1px;
  background: blue;
  display: inline-block;
}

＆＃13;

<div id='headerwrapper'>
  <div id='header1'></div>
  <div id='header2'></div>
  <div id='header3'></div>
  <div id='header4'></div>
  <div id='header5'></div>
  <div id='header6'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以为＃header4设置负上边距。这将推动div。

最终的＃header4样式如下所示：

#header4 {
width: 301px;
height: 350px;
float: left;
clear: left;
margin-top: -200px;
}

-200px可以更改为您需要的任何数字。

Answer 3

您可以使用Masonry-esque解决方案。 Here is a fiddle of the example.如果您需要更多列，请更改column-count，column-width和column-gap。

#headerwrapper {
  width: 100%;
  max-width: 988px;
  margin: 2em auto;
  background: #000;
  padding:10px 20px;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
}

.box.one {
  height: 200px;
  background-color: #d77575;
}

.box.two {
  height: 300px;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: 400px;
}

.box.four {
  background-color: #3daee3;
  height: 500px;
}

.box.five {
  background-color: #bb8ed8;
  height: 600px;
}

    <div id="headerwrapper" class="cols">
      <div id="header1" class="box one"></div>
      <div id="header2" class="box two"></div>
      <div id="header3" class="box one"></div>
      <div id="header4" class="box three"></div>
      <div id="header5" class="box four"></div>
      <div id="header6" class="box five"></div>
      <div id="header7" class="box one"></div>
    </div>

Answer 4

你可以考虑column：

框可能会分成不同的列

#headerwrapper {
  width: 988px;
  margin: 0 auto;
  background: #000;
  padding: 10px 20px;
  -moz-column-count:3;
  column-count:3;
}
#header1 {
  width: 300px;
  height: 250px;
  margin-right: 25px;
  background: red;
}
#header2 {
  width: 300px;
  height: 450px;
  margin-right: 25px;
  background: red;
}
#header3 {
  width: 300px;
  height: 350px;
  margin-right: 25px;
  background: red;
}
#header4 {
  width: 300px;
  height: 350px;
  margin-right: 25px;
  background: blue;
}
#headerwrapper>div {
  margin:15px 25px;
  /* display:inline-block;  */
  }
#headerwrapper>div:first-child {
  margin-top:0;
  }

<!-- begin top header with images -->

<div id='headerwrapper'>
  <div id='header1'></div>
  <div id='header2'></div>
  <div id='header3'></div>
  <div id='header4'></div>
  <div id='header5'></div>
  <div id='header6'></div>
</div>

不打破

#headerwrapper {
  width: 988px;
  margin: 0 auto;
  background: #000;
  padding: 10px 20px;
  -moz-column-count:3;
  column-count:3;
}
#header1 {
  width: 300px;
  height: 250px;
  margin-right: 25px;
  background: red;
}
#header2 {
  width: 300px;
  height: 450px;
  margin-right: 25px;
  background: red;
}
#header3 {
  width: 300px;
  height: 350px;
  margin-right: 25px;
  background: red;
}
#header4 {
  width: 300px;
  height: 350px;
  margin-right: 25px;
  background: blue;
}
#headerwrapper>div {
  margin:15px 25px;
  display:inline-block; /* help to keep all box within a single col .... css rules avoiding breaking seems not yet implemented  */
  }
#headerwrapper>div:first-child {
  margin-top:0;
  }

<!-- begin top header with images -->

<div id='headerwrapper'>
  <div id='header1'></div>
  <div id='header2'></div>
  <div id='header3'></div>
  <div id='header4'></div>
  <div id='header5'></div>
  <div id='header6'></div>
</div>