lista definizione multi-colonna

Question

Ho un <dl> in questo modo:

<dl> 
<dt id="a_1">Quantity: 
<dd id="a_2"> 
<dt id="b_1">Size: 
<dd id="b_2"> 
<dt id="c_1">Rise: 
<dd id="c_2"> 
<dt id="d_1">Color: 
<dd id="d_2"> 
.... 
</dl> 

Questo elenco viene generato in modo dinamico attraverso il php. Ho un contenitore di una certa altezza. Qual è il modo migliore per rendere questo elenco in due colonne quando diventa troppo grande? Se possibile, mi piacerebbe tenerlo come un dl anche se non è assolutamente necessario.

Se aiuta, sto usando il bootstrap.

Answer 1

Il modo più elegante sarebbe quella di utilizzare le proprietà CSS Colonne:

http://codepen.io/cimmanon/pen/tcyHv

dl { 
    columns: 2; 
} 

dd { 
    break-before: avoid; 
} 

Sostegno è abbastanza buono, ma Firefox non onorare la proprietà break-before (che viene utilizzato per evitare che la definizione finisca in una colonna diversa dal suo termine). L'aggiunta di prefissi potrebbe essere necessaria.

http://caniuse.com/#feat=multicolumn