0

プロジェクトの詳細を表示するための div があります ( class main )。今、私は2列にする必要があります。右左 。& & 'auto' and30px widthで正しい div を修正する必要があります。左の列と.height 100%fix in rightheight:autooverflow:hidden

HTML :

<div class="main">
<div class="right">
</div>
<div class="left">
.... Descripton .....
</div>
<div>

CSS:

.main {width:300px; height:auto; overflow:hidden;margin:0 auto;}
.right{width:30px; float:right; height:auto; background-color:#e1e1e1; }
.left{width:270px; float:right; height:auto;}

オンラインデモ私の問題：ここでは、背景色の正しいdivが表示されませんでした：#e1e1e1 ;

私はこれが必要です：ここに

ありがとう。

4

3 に答える 3

0

絶対位置 (position:absolute) で作業する必要があります。

float:right/left はむしろ乱用です

<div style="position:relative;width:300px; height:200px;margin:0 auto; background-color:#00ff00;">
 <div style="position:absolute; right:0; top:0;background-color:#ff0000;color:#000;">  Your right content
  </div>
  &nbsp;
  <div style="position:absolute; left:0; top:0;background-color:#0000ff;color:#000;">
    Left content
  </div>
</div>
于 2012-04-08T09:14:43.457 に答える
0

したがって、右側の列の背景が明るい灰色で、2つの列を互いに並べて作成したいと思います。

どちらも高さが 100% である必要があります。アイテムを 100% 高くするには、タグhtmlとbodyタグも 100% に設定する必要があります。

私はこのjsfiddleがあなたが望むことをすると信じています。背景色を少し変更してすみません。左の列をoverflow: autoテストに設定しました。

于 2012-04-08T10:32:54.800 に答える
-1

例を次に示します: http://jsfiddle.net/fbUQB/。それがあなたが求めていることですよね？

于 2012-04-08T10:19:23.043 に答える