2

この jsFiddle をご覧ください: http://jsfiddle.net/omarjuvera/TpWNY/#base

<div class="client">の高さを「継承」したい<div class="contact">（両方の内側のdivが同じサイズになるようにする）

<div class="client">またはの両方のコンテンツ<div class="contact">は動的に変化することに注意してください。したがって、定義済みの高さを知る方法はありません。ただし、<div class="client">常に 2 行または 3 行になります。

HTML

<div id="conteiner">
    <div class="client">Name: <br/>Phone:<br/>Emergency</div>
    <div class="contact">
        Contact 1<br/>
        Contact 2<br/>
        Contact 3<br/>
        Contact 4<br/>
        Contact 5<br/>
        Contact 6<br/>
        Contact 7<br/>
        Contact 8<br/>
    </div>
</div>

CSS

#conteiner {position: relative;}
#conteiner div {
    display: inline-block;
    border: 2px solid red;
    vertical-align: top;
    height: 100%;
}
#conteiner .client {
    width: 200px;
}
#conteiner .contact {
    width: 400px;
}

=== 編集 (2012 年 7 月 12 日) ===
最終的な jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/
ありがとう @ christofer-vilander !!!

4

4 に答える 4

4

今回だけ、実際に表を作っているので使ってみることをお勧めし<table>ます。:)

于 2012-12-06T21:41:36.033 に答える
2

display: table;andを使用してdisplay: table-cell;、テーブル要素のように動作させるのはどうですか?

このようなもの -デモ

于 2012-12-07T08:00:08.037 に答える
1

私が間違っていなければ、クライアント div と連絡先 div の高さを同じにする必要があります。

同じために以下のコードを使用してください:-

​$(document).ready(function(){
   $('.client').height($('.contact').height());
});​

確認して、助けや懸念がある場合はお知らせください。

よろしく、ドゥルガプラサド

于 2012-12-06T21:46:20.753 に答える
1

height:100%;親要素に高さが設定されている場合にのみ機能します。次のようなことができます: http://jsfiddle.net/TpWNY/2/

#conteiner {
    position: relative;
    height:200px;  // set height of container. 
}
#conteiner div {
    display: inline-block;
    border: 2px solid red;
    vertical-align: top;
    height: 100%;
    overflow:auto; // allow the div to scroll if necessary.
}
#conteiner .client {
    width: 200px;
}
#conteiner .contact {
    width: 400px;
}
于 2012-12-06T22:02:50.247 に答える