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来“清除浮动”并将其赋予{{ 1}} css decleration。

<强> FIDDLE

您的代码将如下所示：

clear:both;

完成此操作后，容器div将包装两个浮动的div，并且您可以将余量应用于它。

将两个div放在容器div中

2 个答案: