Eşit tanım tanımı değişken uzunluklu bir tanım listesi nasıl oluşturulur?

Question

dt ve dd öğeleriyle farklı içeriğe sahip bir tanım listesi oluşturmaya çalışıyorum (this guide yardımıyla). Tabii ki, bu elemanlar için bir genişliği kodlayabiliyordum ama listenin en uzun dt elemanını almasını ve kardeşlerinin uzunluğunu almasını istiyorum. Ayrıca, dd öğesinin içeriği kullanılabilir alandan daha uzun olduğunda, yeni satırın dt öğesinin altında değil, dd öğesinin this question'daki ikinci ekran görüntüsünde başlamasıyla başlaması gerekir.

Bunu, özniteliğiyle çözebileceğimi, ancak çalışmayan bir çözümle yapıştığımı düşündüm. Bu mümkün değil mi, yanlış mı? İşte

i şimdiye kadar (fiddle) var şudur:

HTML:

<dl> 
    <dt>dt: Lorem Ipsum</dt> 
    <dd>dd: Lorem imperdiet</dd> 
    <dt>dt: Lorem id libero in Ipsum and so on and so on</dt> 
    <dd>dd: Lorem id libero in ipsum dolor</dd> 
    <dt>dt: Lorem Ipsum</dt> 
    <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd> 
    <dt>dt: Lorem id libero in Ipsum</dt> 
    <dd>dd: Lorem in ipsum dolor</dd> 
</dl> 

CSS:

dl { 
    display: flex; 
    flex-flow: column nowrap; 
} 
dt { 
    background: gold; 
    display: flex; 
    flex-flow: row wrap; 
} 
dd { 
    background: yellowgreen; 
    display: flex; 
    flex-flow: row wrap; 
    width: auto; 
    margin: 0; 
    padding: 0; 
} 

Answer 1

Ben ne arşivlenmesi mümkün olduğunu sanmıyorum Eğer deniyorlar. Flexbox bu durumda yardımcı olmaz. Ayrıca, görüntü tablosunu kullanamazsınız ve bu nedenle dl sözdizimi, dt+dd gruplarının ambalajlarını saklamıyor. JS'yi dt öğelerinin genişliklerini ölçmek için kullanmanız gerekir, ancak çok satırlı varyantlar nedeniyle de bu kadar kolay olmaz.

Ancak bu biraz modifiye edilmiş "geleneksel" yaklaşıma ne dersin: onları min-genişlik haline getirin, ancak dt'nin dd'ye taşmasına izin verin.

dl:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
dt { 
    float: left; 
    clear: left; 
    padding-top: 1em; 
    margin-right: 1em; 
} 
dd { 
    padding-top: 1em; 
    margin-left: 15em; 
} 

http://codepen.io/ThiemelJiri/pen/KrZrxG

Answer 2

Ben bir DL ile gitmek:

https://jsfiddle.net/luminancedesign/0u0n39b9/

kullanır:/önce: Arka plan işleri için ana bloktan sonra - en iyi düz renk ile 'inline' önlemek için örneğin anahat şekli

dt:nth-of-type(even) {background: silver;} 
dd:nth-of-type(odd) {background: slategrey;} 

ve: Ben bir genişlik sınırı kullandım

dt:nth-of-type(even)::after {... background: darkgrey;} 
dd:nth-of-type(odd)::before {... background: lightslategrey;} 

, ekrana bazı 'estetik' tutmak için - düzensiz bloklarına sahip net okumak için yapmaz. Bununla birlikte, bu, tabular veri düzenine yol açmaktadır ve yukarıda bahsedildiği gibi, bir tablo daha uygun olabilir.