CSS: разделительные поля в двух столбцах

Question

У меня есть html-вывод, который я бы хотел форматировать лучше с помощью css. Я не влияю на то, как генерируется html.

Я хочу иметь две колонки, в зависимости от класса. Я мог бы использовать статические позиции для каждого поля, но если в данных отсутствует поле, будет разрыв.

Это то, что я ищу. (Как вы видите, заказ diffrent)

как поместить поля в столбце, и иметь дело с высотой динамически? помочь высоко ценится.

веселит эндо

<div class="inline dataplugin_entry person"> 
 
    <dl> 
 
     <dt class="id">ID<span class="sep">: </span></dt> 
 
     <dd class="id">487</dd> 
 
     
 
     <dt class="wsid">wsID<span class="sep">: </span></dt> 
 
     <dd class="wsid">2129</dd> 
 
     
 
     <dt class="aktiv">aktiv<span class="sep">: </span></dt> 
 
     <dd class="aktiv">1</dd> 
 

 
     <dt class="nachname">Nachname<span class="sep">: </span></dt> 
 
     <dd class="nachname">Smith</dd> 
 
     
 
     <dt class="vorname">Vorname<span class="sep">: </span></dt> 
 
     <dd class="vorname">Bob</dd> 
 
     
 
     <dt class="kanton">Kanton<span class="sep">: </span></dt> 
 
     <dd class="kanton">ZH</dd> 
 
    </dl> 
 
</div>

Answer 1

Потому что вы не Удельный ed, сколько предметов вы хотите разместить в одной колонке, я могу посоветовать воспользоваться column-countcss3 property. Что он делает, так это заставить браузер равномерно распределять содержимое элемента именно в таком количестве столбцов. Так что в вашем случае я предположил, 2:

<div class="inline dataplugin_entry person"> 
    <dl> 
     <dt class="id">ID<span class="sep">: </span></dt> 
     <dd class="id">487</dd> 

     <dt class="wsid">wsID<span class="sep">: </span></dt> 
     <dd class="wsid">2129</dd> 

     <dt class="aktiv">aktiv<span class="sep">: </span></dt> 
     <dd class="aktiv">1</dd> 

     <dt class="nachname">Nachname<span class="sep">: </span></dt> 
     <dd class="nachname">Smith</dd> 

     <dt class="vorname">Vorname<span class="sep">: </span></dt> 
     <dd class="vorname">Bob</dd> 

     <dt class="kanton">Kanton<span class="sep">: </span></dt> 
     <dd class="kanton">ZH</dd> 
    </dl> 
</div> 

CSS

dl { 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
     column-count: 2; 
} 

dt { clear:left } 
dt, dd { float:left } 

Пример на скрипку здесь - http://jsfiddle.net/dvbdkr28/2/

Поддержка браузера довольно приличная, так что все современные браузеры поддерживают его, а также IE10 и выше. Поддержка мобильных телефонов достигает Android 2.3 и выше.

Надеюсь, это поможет

Answer 2

Это ближайший я получаю на первом пробеге

.dataplugin_entry.person dt { 
 
    width: 100px; 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
.dataplugin_entry.person dd { 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.dataplugin_entry.person dt.aktiv, 
 
.dataplugin_entry.person dt.kanton { 
 
    float:right 
 
} 
 

 
.dataplugin_entry.person dd.aktiv, 
 
.dataplugin_entry.person dd.kanton { 
 
    float:right 
 
}

<div class="inline dataplugin_entry person"> 
 
    <dl> 
 
     <dt class="id">ID<span class="sep">: </span></dt> 
 
     <dd class="id">487</dd> 
 
     
 
     <dt class="wsid">wsID<span class="sep">: </span></dt> 
 
     <dd class="wsid">2129</dd> 
 
     
 
     <dt class="aktiv">aktiv<span class="sep">: </span></dt> 
 
     <dd class="aktiv">1</dd> 
 

 
     <dt class="nachname">Nachname<span class="sep">: </span></dt> 
 
     <dd class="nachname">Smith</dd> 
 
     
 
     <dt class="vorname">Vorname<span class="sep">: </span></dt> 
 
     <dd class="vorname">Bob</dd> 
 
     
 
     <dt class="kanton">Kanton<span class="sep">: </span></dt> 
 
     <dd class="kanton">ZH</dd> 
 
    </dl> 
 
</div>