html - 在不使用位置的情况下 float 顶部画廊

Question

我当前的实际结果:

我要动蓝<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;
}

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

请注意，每行的元素数可能会发生变化(即，我不知道新行将从哪里开始)。

Answer 1

看起来您只需要一个负的上边距。它还可以帮助您将包装器变成 block 元素，并将其子元素变成内联 block 元素。这样他们就可以更好地排队。

祝你好运!

#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;
}

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