0

こんにちは、私は 2 つの div を作成しようとしています。以下に示すように、1 つの div のスタイルが異なります。

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

    float:left;
}

そして、私のデータからのテキストを表示する2番目のもの

#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 は画像と同じ高さではありません

ここに画像の説明を入力

したがって、これらの div を自動的にストレッチするラッパーのような CSS が必要ですが、どうすればこれを行うことができますか?

4

2 に答える 2

4

このために、このためのdisplay:tableプロパティを使用できます。次のように書きます。

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

詳細については、これを確認してくださいhttp://jsfiddle.net/9Eytv/

于 2012-08-09T08:32:14.190 に答える
0

これは私がすることです：

#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>

これがうまくいくことを願っています:)

于 2012-08-09T09:21:32.753 に答える