html - 带有清晰 : left element 的 Divs 旁边的空白

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，这样做可以:

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

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

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

这个案例也说明了为什么基于 ID 的选择器不是一个好主意，以及为什么应该使用语义类名。一旦该类型的元素在页面的其他地方使用，调用 -left 就会变得困惑。