在容器div内放置两个div

Question

原来我在另一个容器div内放置了两个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

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

FIDDLE

你的代码应该是这样的：

<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，你将能够利润率适用于它。