将两个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中的元素浮动：

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

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

Answer 2

由于浮动元素不扩大其父母的身高，你需要添加一个“清除浮动” div后两个浮动divs容器内，并给它clear:both; css decleration。

小提琴

您的代码将如下所示：

<style type="text/css">
.clr{
    clera:both;
}
#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 class="clr"></div>
</div>

一旦你完成了这个，容器div将包装两个浮动div，你将能够应用边距。