Wie dt und dd Tag zu machen, um die gleiche Höhe für den Hintergrund zu haben?

Question

Nach dieser question gibt es keine einfache Möglichkeit, dies zu lösen und nur die Tabelle zu verwenden. Aber gibt es auch einen Weg, es zum Laufen zu bringen? Mein Problem ist, dass ich einen Hintergrund für dt habe, aber wenn dd mehr Inhalt als dt hat, bleibt seine Höhe gleich. Wie mache ich beide, um die gleiche Höhe zu haben? Ich denke daran, ihre Größe in jQuery zu bekommen, aber es scheint ein bisschen komplex, das zu tun. Ich bin ein Anfänger in jQuery, also bin ich mir nicht sicher, ob es klappen wird. Wie auch immer, ich möchte nicht die negative margin und padding, weil ich die dl overflow: visible wegen einer Dropdown-Liste benötigen.

Original-

JSFIDDLE

Mit negative margin und padding

JSFIDDLE

Auf jeden Fall, ich will es nicht margin-padding-Combo um jeden Preis sein . Aber für die Umwandlung in Tabelle bin ich offen dafür, wenn das der einzige Weg ist, das zu beheben. Bitte gib mir einen Einblick, wie ich das beheben soll. Vielen Dank!

Answer 1

Es gibt Jquery Plugins für das, zum Beispiel diese: http://css-tricks.github.io/Equalizer/

Answer 2

Bitte sehen:

jsfiddleSee fiddle

Ich benutze das display: table.
Nicht sicher Wenn es das ist, was Sie brauchen.

Answer 3

Nun, es hängt wirklich davon ab, was Sie im letzten Lauf zu tun versuchen.
Wenn es keinen einfachen Weg gibt, es zu tun, dann gibt es einige Workarounds, um den Zweck zu erreichen.
Eine einfache Möglichkeit, den Hintergrund einzurichten wäre, nur diese verwenden:

dl { 
    width:100%; 
    display:block; 
    background:#999999; 
} 

Aber ich schlage vor, Sie Ihren Code ein wenig andere Art von Tags wie Div

Answer 4

Mai schließen ändern b es wird hilfreich sein:

prüfen: https://jsfiddle.net/buzjby59/2/

<dl> 
    <dt>Term A</dt> 
    <dd>Definition A1</dd> 
    <dd>Definition A2</dd> 
    <dd>Definition A3</dd> 
    <dd>Definition A4</dd> 
</dl> 
<dl> 
    <dt>Term B</dt> 
    <dd>Definition B1</dd> 
    <dd>Definition B2</dd> 
    <dd>Definition B3</dd> 
</dl> 

body { 
    margin: 0; 
} 
dl { 
    width: 100%; 
    display: table; 
    margin:0 0 15px; 
} 
dt { 
    background: #999999; 
    display: table-cell; 
    text-align: left; 
    vertical-align: top; 
    width: 80px; 
} 
dd { 
    background: #3399ff; 
    margin-left: 0; 
    display:block; 
} 
dt:after, dd:after { 
    clear: both; 
}