在容器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，你將能夠利潤率適用於它。