css - 如何创建一个包含两个 div 并自动拉伸的 div

Question

大家好，我正在尝试创建两个 div。一个 div 具有不同的样式，如下所示

#subpage_left
{
    width:167px;
    border:solid 2px red;
    background-image:url(../../images2/images/altsayfa_menu_bg.jpg); 
    background-repeat: repeat;

    float:left;
}

第二个显示来自我的数据的文本

#subpage_right
{
    width:700px;
    background-color:White;
    border:solid 2px red;
    font-family: 'Museo300Regular';

    float:left;


}

我想将这些 div 并排放置，但我的数据来自“subpage_right”div，所以这个 div 按文本长度拉伸，而“subpage_left”div 没有拉伸我的意思是这些 div 的高度与您看到的图像不同

所以我需要一个像包装器这样的css来自动拉伸这些div，但我该怎么做呢？

Answer 1

为此，您可以为此显示：table属性。像这样写：

#subpage_left,#subpage_right{
 display:table-cell;
}

检查更多http://jsfiddle.net/9Eytv/

Answer 2

这就是我要做的：

#maincont
{
position:relative;
width: 867px; 
height: auto;}

#subpage_left
{
width:167px;
border:solid 2px red;
background-image:url(../../images2/images/altsayfa_menu_bg.jpg); 
background-repeat: repeat;
float:left;
}

#subpage_right
{
width:700px;
background-color:White;
border:solid 2px red;
font-family: 'Museo300Regular'; /* Use some standard font Like Arial */
float:left;
}
.clear
{
clear:both;
}

和 div 的

<div id="maincont">
<div id="subpage_left"></div>
<div id="subpage_right"></div>
<div class="clear"></div>
</div>

希望这对你有用:)