2

現在の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;
            }

2 列のレイアウトにするために追加する CSS ルールは何ですか (タイトルである最初の div を除く)。div (2 つのスパンを含むもの) の数が変動することを考慮してください。できれば、CSSのみを変更したいのですが...

4

3 に答える 3

3

CSS3 multicol モジュールを見てください。

ただし、IEのサポートは悪いです。他のすべてのブラウザはすでに対応しています。

于 2012-05-23T07:56:31.757 に答える
2

このようなことを意味しますか？

フィドル

私が行ったことはすべてこのルールに追加されましたが、タイトルを除外するフィルターを追加しましたwidth: 50%(もちろん、タイトルにタイトルの ID を与えます):float:left:not

.DivFiltrosInforme > div > div:not(#title)
{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 50%;
    float: left;
}
于 2012-05-23T14:26:13.763 に答える
0

うーん、2 つの div (2 列) でフロートを使用してから、親 div で、overflow:hidden を作成できると思います。

私はあなたのコードが非常に複雑であることがわかりました（私にとって）Lolz

2 列レイアウトの簡単なコードを次に示します。

レイアウト例 @ 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;
}

</p>

于 2012-05-23T08:02:10.323 に答える