Jak utworzyć listę definicji o wyrównanych definicjach o zmiennej długości?

Question

Próbuję utworzyć listę definicji (przy pomocy this guide) z jej elementami dt i dd o różnej zawartości. Oczywiście mógłbym zakodować szerokość tych elementów, ale chciałbym, aby lista zajmowała najdłuższy element dt i sprawić, by rodzeństwo miało swoją długość. Ponadto, gdy zawartość elementu dd jest dłuższa niż dostępna przestrzeń, nowa linia nie może zaczynać się pod elementem dt, ale raczej tam, gdzie element dd rozpoczyna się tak, jak na drugim zrzucie ekranu w this question.

Pomyślałem, że mogę rozwiązać ten problem z atrybutem display: flex, ale utknąłem w niedziałającym rozwiązaniu. Czy to nie jest możliwe, czy nie jestem w niewłaściwy sposób?

Oto co mam do tej pory (fiddle):

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

Nie sądzę, że możliwe jest archiwizowanie co ty próbują. Flexbox nie pomoże w tym przypadku. Nie można również używać tabeli wyświetlania i tak dalej, ponieważ składnia dl niestety nie ma zawijania grup dt+dd. Musiałbyś użyć JS do obliczenia szerokości elementów dt, ale nie byłoby to tak łatwe z powodu wariantów wielowierszowych.

Ale co powiesz na to nieco zmodyfikowane podejście "tradycyjne": ustaw je na min-width, ale pozwól dt na przepełnienie do dd.

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

miałem iść z DL:

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

zastosowań: Przed/Po bloków na tle paskującym - najlepiej z kolorem, aby uniknąć 'inline' konturowanie kształtu, np

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

oraz:

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

Użyłem szerokość granicę, aby zachować pewne „estetyczne” na wyświetlaczu - mając nieregularne bloki nie robi dla jasnego czytania. Jednak prowadzi to do tabelarycznego układu danych i jak wspomniano powyżej, tabela może być bardziej odpowiednia.