我有两个div,主要和侧面,我想确保保持长度的较长者。
目前,主要比侧面长,我怎样才能让它们保持相同的高度,具体取决于内容?
#main{
width:818px;
padding:20px;
float:left;
background-color:white;
border-top-left-radius:20px;
border-left:1px solid #909090;
border-top:1px solid #909090;
}
#side{
float:left;
width:230px;
padding:20px;
background-color:#FEF5CA;
border-top:1px solid #909090;
border-right:1px solid #909090;
}
感谢。
答案 0 :(得分:1)
display: table-cell;
CSS3是你的朋友; - )
答案 1 :(得分:0)
要使用display:table-cell,您需要从main和side中删除float属性。然后将display:table-cell添加到两者,它将执行您想要的操作。
答案 2 :(得分:0)
将表格布局替换为divs最好的方法是什么?
将所有内容重新格式化为具有display属性的表格。 ;)
HTML
<div class="table-div" style="width:100%">
<div class="tr-div">
<div class="td-div">td-div 1a</div>
<div class="td-div">td-div 2a</div>
<div class="td-div">td-div 3a</div>
</div>
<div class="tr-div">
<div class="td-div">td-div 1b</div>
<div class="td-div">td-div 2b</div>
<div class="td-div">td-div 3b</div>
</div>
</div>
CSS
.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}
jsFiddled here http://jsfiddle.net/sPm9M/
答案 3 :(得分:0)
你可能每个人都可以把它们放在课堂上。这将确保您的所有属性都相同。你也可以这样做:
CSS
#main,#side {
width: //the width
}
#main {
width:818px;
padding:20px;
float:left;
background-color:white;
border-top-left-radius:20px;
border-left:1px solid #909090;
border-top:1px solid #909090;
}
#side {
float:left;
width:230px;
padding:20px;
background-color:#FEF5CA;
border-top:1px solid #909090;
border-right:1px solid #909090;
}