在容器 div 中放置两个 div答案

【问题标题】：Put two div within container div在容器 div 中放置两个 div
【发布时间】：2014-04-03 13:28:37
【问题描述】：

事实证明，我将两个带有文本的 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>

【问题讨论】：

可以添加html吗？
你能提供一个有效的 jsFiddle 演示和 html 吗？
jsfiddle.net/4nY7h

标签： css html

【解决方案1】：

您只需要使用 clearfix，因为您已经在容器 div 内浮动元素：

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

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

【讨论】：

抱歉有点尴尬，但您能更简洁地解释一下吗？我把那个代码放在哪里？谢谢！
由于您的主容器是#contenedora-indice，您应该对其应用clearfix。我编辑了我的答案以表明这一点。这是一种众所周知的强制父母自我清除其孩子的方法。这是对实际情况的一个很好的回答：stackoverflow.com/questions/9543541/…
对不起，我不明白，我像个白痴一样跑你能把它放在我的代码中让它出现吗？你能举个例子吗？谢谢
这里是一个例子：codepen.io/thesublimeobject/pen/nHcbw。我所做的只是将 clearfix 添加到 CSS 的底部。

【解决方案2】：

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

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，您将能够对其应用边距。

【讨论】：