0

次のように配置された3つの列を持つWebページを設計しました。

[[左][コンテンツ][右]]

そしてそれはこのように表示されています：

[[左][右]]
    [コンテンツ]

私はctrd+スクロールダウンします、それは大丈夫に見えます、どうすればこれを修正できますか？

cssは次のとおりです。

.advert_panel_right{
width:250px;
height:100%;
float:left;
}

.advert_panel_left{
    width:250px;
    height:100%;
    float:right;
}

.content_wraper{
    width:902px;
    margin: 0px auto;
}

.content{   
    font-family: Verdana, Geneva, sans-serif;
    width:100%;
    margin-left:25px;
}
4

3 に答える 3

2

例： http： //jsfiddle.net/GN8RL/

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="content"></div>
    <div id="right"></div>
</div>

CSS

#left, #content, #right {
  float:left;
  height:100px;
  border:1px solid red;
}

#left, #right {
   width:100px;
}    
#content {
   width:200px;
}
#wrapper {
    width:406px; /* 400 + borders */
    margin:0 auto;
}

</ p>

于 2012-04-17T19:11:48.603 に答える
1 
.content_wraper{
    width:802px;
    margin: 0px auto;
}

ラッパーの幅を減らすことは役に立ちますか？私はそれが大きすぎると信じています。

于 2012-04-17T19:06:00.113 に答える
0

いくつかのこと（およびタイプミス）を編集する必要がありましたが、ここにテストケースがあります。正常に動作します：http ：//jsfiddle.net/UZfBc/

まず、右パネルを右に、左パネルを左にフロートさせます。タイプミスを取り除きます' content_wraper'。私はそれ.contentが中間のdivであり、それ.content_wrapperがラッパーであると仮定しました。

.content親の値を取得して使用するため、幅を100％にすることはできません。これは、それぞれ250px、902px（+ 25pxマージン）、250pxの3つのdivがあり、これらを902pxの1つのdivに入れたいことを意味します。それは決してうまくいきません。.content divのサイズを計算するだけです：902-250-250-25=377px。それからそれをしましょうfloat: left;。それは動作します（私の例のように）

于 2012-04-17T19:17:17.343 に答える