0

3 列のレイアウトを作成する際に問題があります。私はすべての例をオンラインで試しました - Google を使用しました。これのどれも私の問題を解決していないようです。

私がやろうとしていることは、知識のある人にとっては簡単です。

  1. 画面全体をカバーする 3 列の流動的なレイアウトを作成します。
  2. 左の列は幅 230px、固定、高さ 100% である必要があります。
  3. 中央の列と右の列は同じ幅にする必要があります。
  4. 中央と右の列の両方で、それらは互いに「浮く」必要があります

ズームアウトすると問題が発生します。中央の柱が左に逃げて、中央の柱と右の柱の間に巨大な白い隙間を作ります。

それが私の問題です。

中央と右の列は互いに近づける必要があります - 隙間はありません。

どうすればこれを解決できますか?

ここで私の試みを見ることができます：Fiddle

ズームアウトするだけで、問題がすぐにわかります。これを修正するには助けが必要です。どのように？

幅が 100% に設定された中央の列内で div ラッパーを使用すると、別の問題が発生します。上記と同じ問題が発生します。左と右の両方の列のテキストもフロートにする必要があります。

overflow:hidden後で、中央の列の右側にある絶対divを使用して、右の列を指す画像の矢印を設定する必要があるため、使用できません。

4

2 に答える 2

0

3 列の親要素に固定幅を指定し、クラス clearfix を追加します

``

.clearfix:after {     
    content: ".";    
    display: block;    
    clear: both;  
    visibility: hidden;  
    line-height: 0;   
    height: 0;   
}   

.clearfix {   
    display: inline-block;  
}   

html[xmlns] .clearfix {    
    display: block;    
}    

* html .clearfix {     
    height: 1%;      
}
于 2013-03-09T19:29:01.330 に答える
0

次のようなことを意味します: http://jsfiddle.net/gbRzM/ ? (左、右、および幅のプロパティを使用してすべてを配置します)

.left {
    width: 230px;
position:fixed;
    background:GREEN;
}

.right {
    right:0;
    width:30%;
    position:fixed;
    background: RED;
}

.center {
    left:230px;
    right:30%;
    position:fixed;
    border:1px solid;
    background:YELLOW;
}

またはより正確にこれ: http://jsfiddle.net/HKJvP/ ? (ピクセルと % を混合できるように、新しい div に中央と右を配置し、指定した幅と同じ幅を許可します)

.left {
    width: 230px;
    position:fixed;
    background:GREEN;
}

.notleft{
    left:230px;
    height:100%;
    right:0;
    position:fixed;
}

.right {
    right:0;
    width:50%;
    position:absolute;
    background: RED;
}

.center {
    left:0;
    width:50%;
    position:absolute;
    border:1px solid;
    background:YELLOW;
}
于 2013-03-09T04:14:45.773 に答える