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;
}

=== 编辑 (07/12/2012) ===
最终 jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/
谢谢@ christofer-vilander !!!

4

4 回答 4

4

就这一次，我建议您使用<table>，因为您实际上正在制作一张桌子。:)

于 2012-12-06T21:41:36.033 回答
2

使用display: table;并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 回答