CSS使特定的HTML兩列布局

Question

具有當前的html：

<div id="divFiltros" class="DivFiltrosInforme">
    <div>
        <div>
            <span>FILTROS SELECCIONADOS</span>
        </div>
        <div>
            <span>Fecha desde:</span><span id="spFiltrosFechaDesde">01/01/2012</span>
        </div>
        <div>
            <span>Fecha hasta:</span><span id="spFiltrosFechaHasta">01/01/2012</span>
        </div>
        <div>
            <span>Clientes:</span><span id="spFiltrosClientes">Clientex</span>
        </div>
        <div>
            <span>Sección:</span><span id="spFiltrosSeccion">Cualquiera</span>
        </div>
    </div>
</div>

而這個CSS：

  .DivFiltrosInforme
{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .DivFiltrosInforme > div
    {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        border-style: solid;
        border-width: 2px;
    }

        .DivFiltrosInforme > div > div
        {
            padding-top: 5px;
            padding-bottom: 5px;
        }

            .DivFiltrosInforme > div > div:first-child > span
            {
                font-weight: bold;
                font-size: 14pt;
            }

            .DivFiltrosInforme > div > div > span
            {
                font-weight: bold;
                font-size: 10pt;
                margin-left: 5px;
                margin-right: 5px;
            }

您要添加什么CSS規則以使其成為2列布局（不包括標題的第一個div）。 考慮到div的數量（包含兩個范圍的div）會變化。 最好我只想更改CSS ...

Answer 1

看一下CSS3 multicol模塊 。

它雖然有不好的IE支持。 所有其他瀏覽器均已具備此功能 。

Answer 2

你的意思是這樣的嗎？

小提琴

我所做的只是在此規則中添加了width: 50%和float:left ，但是添加了:not過濾器以過濾出標題（當然，給title提供標題的id）：

.DivFiltrosInforme > div > div:not(#title)
{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 50%;
    float: left;
}

Answer 3

嗯，我認為您可以在兩個div（兩列）上使用浮點數，然后在父div上使用溢出：隱藏。

我發現您的代碼對我來說非常復雜

這是兩列布局的簡單代碼。

示例布局@ jsFiddle.net <-單擊xD

HTML

<div id="container">
    <div id="left">
    </div>
    <div id="right">
    </div>
</div>

CSS

#container {
    border:1px solid red;
    width:100%;
    height:auto;
    overflow:hidden
}

#left {
    background:blue;
    width:50%;
    height:100px;
    float:left;
    color:red;
}

#right {
    background:black;
    width:50%;
    height:100px;
    float:left;
    color:white;
}