0

htmlは次のとおりです。

<div id="container">

<div id="top-bar">Top Bar</div>    
<div id="nav-bar">
    <a>Blah 1</a>
    <a>Blah 2</a>
    <a>Blah 3</a>
</div>

<div id="main">
    <div id="column-left">
        column left
    </div>
    <div id="column-right">
        column right
    </div>
     <div id="column-right-adsense">
        column right adsense
    </div>
    <div class="spacer"></div>
</div>

<div id="footer">footer</div>

CSSは次のとおりです。

#container {
/* width: 500px; */
border: 1px solid black;
}

#top-bar {
height:60px;
border: 1px solid red;    
}

#column-left {
border: 1px solid blue;    
width: 40%; /* 200 / 500 */
 float: left;
}

#column-right {
    border: 1px solid yellow;    
    width: 40%; /* 200 / 500 */
    float: left;
}
#column-right-adsense {
        border: 1px solid cyan;    
width: 18%; /* 90 / 500 */
 float: left;

}

.spacer {
    clear:both;
}

ウィンドウのサイズを変更すると、このフィドルでわかるように、最後の列が下にジャンプします。どうすればそれを防ぐことができますか?

4

3 に答える 3

1

そのようなページの作成に役立つbootstrap.jsのようなものをチェックアウトできます。

ブートストラップ

于 2013-03-09T12:18:32.977 に答える
0

ここで固定し、

チェック、http://jsfiddle.net/cVdwE/2/

#column-left {
border: 1px solid blue;     margin:-1px;
width: 40%; /* 200 / 500 */
 float: left;
}

#column-right {
    border: 1px solid yellow;   margin:-1px;  
    width: 40%; /* 200 / 500 */
    float: left;
}
#column-right-adsense {
        border: 1px solid cyan;   margin:-1px;  
width: 20%; /* 90 / 500 */
 float: left;

}
于 2013-03-09T12:10:53.657 に答える
0

これは、1px の実線の境界線が原因で発生します。

次の 2 つの方法で修正できます。

  1. width: 18%;3 番目の列からとを削除しfloat: left;て追加しますoverflow: hidden;
  2. box-sizing3 つの列に追加します。

ここに例がありますhttp://jsfiddle.net/5666G/

CSS Box モデルとFloat コンテインメントについて必ず読む必要があります。

于 2013-03-09T12:15:07.263 に答える