Div高于内容？

Question

我正在制作一份时事通讯，因此我必须制作2列，并且我使用了width的50％的2个div来执行此操作。 但问题是右边的div超出了内容。

我怎么能解决这个问题？谢谢

以下是fiddle

#yellow {
  background-color: rgb(214, 196, 0);
  width: 100%;
  margin-bottom: auto;
}
#yellowL {
  float: left;
  width: 50%;
}
#yellowR {
  position: relative;
  float: right;
  width: 50%;
}
#h1v2 {
  color: rgb(67, 153, 186);
  background-color: rgb(214, 196, 0);
}

<div id="yellow">
  <h1 id="h1v2">Geschäftsverlauf / Déroulement des affaires</h1>
  <div id="yellowL">
    <h1 id="h1v2">Offerten</h1>
    <p>

    </p>
    <h1 id="h1v2">Projekte</h1>
    <p>

    </p>
  </div>
  <div id="yellowR">
    <h1 id="h1v2">Offres</h1>
    <h2>Bruit</h2>
    <p>

    </p>
    <h2>Sols</h2>
    <p>

    </p>
    <h2>Déchets</h2>
    <p>

    </p>
    <h2>EIE</h2>
    <p>

    </p>
    <h2>Physique et acoustique du bâtiment</h2>
    <p>

    </p>
    <h1 id="h1v2">Projets</h1>
    <h2>Bruit</h2>
    <p>

    </p>
  </div>
</div>

Answer 1

将overflow: hidden;添加到您的#yellow css规则

#yellow {
    background-color: rgb(214, 196, 0);
    width: 100%;
    margin: auto;
    overflow:hidden;
}

Answer 2

你可以将这一行添加到这两个之后的div中：

#personnel {
    clear: both; 
}

我用小提琴编辑了你的代码。 这将使上面的所有内容在这个新的div开始之前完成。