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

你會爲了使其成爲2列布局添加什麼CSS規則（不包括第一個div，這是標題）。考慮到div的數量（包含兩個跨度的）會變化。我最好只想改變CSS ...

Answer 1

你的意思是someth像這樣？

Fiddle

所有我做過加入width: 50%和float:left此規則，倒是:not濾波器濾除標題（同時給出標題，當然標題的ID）：

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

Answer 2

看看CSS3 multicol module。

雖然它有IE瀏覽器支持不好。所有其他瀏覽器都是already capable。

Answer 3

嗯，我認爲你可以在兩個div（兩列）上使用浮動，然後在父div上，使溢出：隱藏。

我發現你的代碼非常複雜（對我來說）LOLZ

下面是一個兩個欄佈局簡單的代碼。

Example layout @ 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; 
}