背景と同じ高さにdtタグとddタグをするにはどうすればいいですか？

Question

このquestionによれば、これを解決してテーブルを使用する簡単な方法はありません。しかしそれでも、それを動作させる方法はありますか？私の問題は、私はdtの背景を持っていますが、ddがdtより多くの内容を持つとき、その高さは変わりません。どのようにして両者を同じ高さにするか？私はjqueryの高さを考えているが、それは少し複雑に思える。私はjqueryの初心者ですので、うまくいくかどうかわかりません。とにかく、ドロップダウンのためにoverflow: visibleになるためには、dlが必要なので、negative marginとpaddingは必要ありません。

オリジナルいずれにせよ、私はそれがすべてのコストでマージン・パディングコンボになりたくない

negative marginでJSFIDDLE

と

JSFIDDLE

padding 。しかし、それをテーブルに変換することについては、それがこの問題を解決する唯一の方法であれば、私はそれを公開しています。私はこれをどのように修正すべきかの洞察を私に与えてください。どうもありがとうございました！

Answer 1

そのためのjQueryのプラグインは、例えば、この1のために、あります：テーブル：私はディスプレイを使用

jsfiddleSee fiddle

：http://css-tricks.github.io/Equalizer/

Answer 2

これを確認してください。
あなたが必要なものかどうか不明です。

Answer 3

まあ、実際には、最終的に何をしようとしているかによって異なります。
これを行う簡単な方法がない場合は、目的を達成するための回避策がいくつかあります。
背景を設定する簡単な方法は、ちょうどこの使用するために、次のようになります。

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

をしかし、私は本部

Answer 4

月Bのように、あなたがタグの異なるタイプを含めるようにあなたのコードを少し変更を提案それが参考になる。ここで

チェック： 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; 
}