Estilo DT para flotar a la izquierda de DD

Question

Estoy intentando diseñar una lista de definiciones para que cada dt flote a la izquierda de los elementos dd correspondientes. He utilizado:

dt { 
    clear: both; 
    float: left; 
    width: 6em; 
} 
dd { 
    margin-left: 6.5em; 
} 

que funciona hasta donde llega. Maneja bien múltiples elementos dd por dt y dd texto que es lo suficientemente largo para abarcar varias líneas.

Sin embargo, realmente me gustaría ser capaz de hacer frente a múltiples dt elementos por dd (que es HTML válido) y dt elementos que son más altos que los correspondientes elementos de dd (debido a la longitud del texto haciendo que las líneas de envolver) En este punto, el estilo se desmorona y los elementos posteriores dd se salen de la línea con su dt.

He intentado varias cosas como flotar el dd también, que rompe la alineación de múltiples dd elementos. Agregar dd + dd { clear: both; } que casi funciona, pero ahora el texto largo dd se encuentra en su dt (sin mencionar navegadores antiguos que no respetan la regla).

¿Alguien ha logrado hacer esto? Realmente no quiero darme por vencido y utilizar una mesa, pero tal vez sea apropiado.

Mi marcado prueba está aquí: http://pastebin.com/nmAQ5Xdm

Answer 1

he descubierto una manera de hacer esto cuando no le importa limitar el ancho del elemento dl:

dl { 
    max-width: 30em; 
    overflow: hidden; 
} 
dt, dd { 
    margin-top: 0.5em; 
} 
dt { 
    clear: both; 
    float: left; 
    width: 6em; 
} 
dd { 
    float: right; 
    margin-left: 0.5em; 
    width: 22.5em; 
} 

No es perfecto como el el estilo se rompe si la ventana gráfica es demasiado estrecha para el dl.

Answer 2

Esto funciona para mí. Establezca un ancho en el dt y flótelo hacia la izquierda. A continuación, deje el dd como display: block (predeterminado) y déle un margen a la izquierda de la misma cantidad. Ahora el dd se ajustará al mismo ancho que el dt. La flotación de su dt borrará automáticamente el block dd. Puede ajustar el espaciado entre el par dt/dd ajustando margin-bottom del dd.

Si puede tener dds vacíos, entonces puede agregar clear: both y margin-bottom a su dt también para que termine en el lugar correcto sin contenido dd para ponerlo allí.

dt { 
    float: left; 
    width: 8em; 
    clear: both; 
    margin-bottom: 1em; 
} 
dd { 
    margin-left: 8em; 
} 
dd { 
    margin-bottom: 1em; 
}