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;
            }

您将添加哪些 CSS 规则以使其成为 2 列布局（不包括作为标题的第一个 div）。考虑到 div 的数量（包含两个跨度的那些）会有所不同。最好我只想更改 CSS ...

4

3 回答 3

3

看看CSS3 multicol 模块。

虽然它对 IE 的支持很差。所有其他浏览器都已经具备.

于 2012-05-23T07:56:31.757 回答
2

你的意思是这样的？

小提琴

我所做的只是添加width: 50%到float:left这条规则中，但添加了一个:not过滤器来过滤掉标题（当然，同时给标题一个标题的 id）：

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

嗯，我认为你可以在两个 div（两列）上使用浮点数，然后在父 div 上，使溢出：隐藏。

我发现你的代码非常复杂（对我来说）Lolz

这是两列布局的简单代码。

示例布局@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 回答