css - 将两个 div 放在容器 div 中

Question

事实证明，我将两个带有文本的 div 放在另一个容器 div 中，但如果容器 div 在上面并且好像它有大小，则不会占用 div 容器的空间。我需要帮助，因为我想应用到 div 容器的顶部和底部边距，因此这是不可能的。

<style type="text/css">
#contenedora-indice {
    width: 870px;
    height: 100%;
}
.columna-izquierda {
    width: 250px;
    float: left;
    height: 100%;
    display: block;
}

.columna-derecha {
    width: 250px;
    float: right;
    height: 100%;
    display: block;
    margin-bottom: 0;
    margin-top: 0;
}

.titulo-categorias {
    font-size: 20px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-right: 0px;
    color: #000066;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

</style>
<div id="contenedora-indice">
<div class="columna-izquierda"><span class="titulo-categorias">Mapa de la zona de Lista con los accesos a la estación de metro y las paradas y recorridos de las líneas de autobuses de la EMT. (NOTA: Las líneas nocturnas de bus de la EMT Madrid no están actualizadas de acuerdo con la reordenación de la red de autobuses nocturnos del 30 de septiembre de 2013) 1</div>
<div class="columna-derecha"><span class="titulo-categorias">Mapa de la zona de Lista con los accesos a la estación de metro y las paradas y recorridos de las líneas de autobuses de la EMT. (NOTA: Las líneas nocturnas de bus de la EMT Madrid no están actualizadas de acuerdo con la reordenación de la red de autobuses nocturnos del 30 de septiembre de 2013) 1</div>
</div>

Answer 1

你只需要使用一个 clearfix，因为你已经在容器 div 中 float 了元素:

#contenedora-indice:before,
#contenedora-indice:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

#contenedora-indice:after {
    clear: both;
}