Divs旁边​​的空白区域：clear元素

Question

所以我正在使用HTML和CSS创建一个响应式网站，并且我在容器宽度为50％时创建了四个div元素，这些元素中的每一个都是25％宽度和25％高度。制作一个正方形。这四个div旁边是另一个div，宽度为50％。当我试图将两个容器放到侧面时，它们看起来不正确。下面的图片将清楚地证明这一点。

我想要实现的目标。

非常感谢任何帮助！

HTML代码

<div id="tile-1-small-left-1">

</div>
<div id="tile-1-small-left-2">

</div>
<div id="tile-1-small-left-3">

</div>
<div id="tile-1-small-left-4">

</div>

<div id="tile-1-small-right">

</div>

CSS代码：

#tile-1-small-left-1 {
    width: 25%;
    height: 25%;
    background-color: red;
    display: block;
    float: left;
}
#tile-1-small-left-2 {
    width: 25%;
    height: 25%;
    background-color: green;
    display: block;
    float: left;
}
#tile-1-small-left-3 {
    width: 25%;
    height: 25%;
    background-color: yellow;
    display: block;
    float: left;
    clear: left;
}
#tile-1-small-left-4 {
    width: 25%;
    height: 25%;
    background-color: blue;
    display: block;
    float: left;
}
#tile-1-small-right{
    /*background-image: url(../img/hero_rotation.jpg);*/
    background-color: purple;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 50%;
    float: right;
    height: 45%;
}

Fiddle demo

Answer 1

正如我所提到的，这通常需要另一层次的结构。这可以基于你的原始CSS：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}

#tile-1-small-left-1 {
  width: 50%;
  height: 50%;
  background-color: red;
  display: block;
  float: left;
}

#tile-1-small-left-2 {
  width: 50%;
  height: 50%;
  background-color: green;
  display: block;
  float: left;
}

#tile-1-small-left-3 {
  width: 50%;
  height: 50%;
  background-color: yellow;
  display: block;
  float: left;
  clear: left;
}

#tile-1-small-left-4 {
  width: 50%;
  height: 50%;
  background-color: blue;
  display: block;
  float: left;
}

.tile-1-small-right {
  /*background-image: url(../img/hero_rotation.jpg);*/
  background-color: purple;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 50%;
  float: right;
  height: 45%;
}

＆＃13;

<div class="tile-1-small-right">

</div>
<div class="tile-1-small-right">
  <div id="tile-1-small-left-1">

  </div>
  <div id="tile-1-small-left-2">

  </div>
  <div id="tile-1-small-left-3">

  </div>
  <div id="tile-1-small-left-4">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我所做的是将四个较小的元素包装在较大元素的另一个实例中（这需要将选择器更改为类而不是ID）。

这个案例还说明了为什么基于ID的选择器是一个坏主意，以及为什么应该使用语义类名。只要在页面的其他位置使用该类型的元素，调用某些内容-left就会变得混乱。

Answer 2

对于第一个图片示例，只需添加<div style="clear:both"></div>

即可

<div id="tile-1-small-left-4"></div>

<div style="clear:both"></div>

<div id="tile-1-small-right"></div>