5

HTML：

<div id="wrapper">

    <div id="tabs">   
    </div> <!-- tabs close !-->


    <div id="verticalStack">

        <div id="accordion">
        </div> <!-- accordion close !-->


        <div id="usersBox">
        </div><!-- usersBox close !-->

        <div id="displayProductButtons">
        </div> <!-- displayProductButtons close !-->

    </div>  <!-- verticalStack !-->


</div> <!-- wrapper close !-->

CSS：

body {
   margin:0;
   padding:0;
   font-family: Verdana, Times, serif;
   font-size: 12px;
   color: #333333;
   background-color: #F9F9F9;
   min-width: 944px;
}

#wrapper{
    margin:10px;
    width:90%;
}


#tabs {
    float:left;
    width:700px;
    margin-right: 10px; 
}

#verticalStack{
    float:left;
    width:400px;
    height:500px;
}

#accordion{
    float:left; 
}

#usersBox{
    width:100%;
    margin-top:10px;
    float:left;
    border:1px solid #aaa;
    border-radius:5px;
}

#display{
    margin-top:25px;
    float:left;
}

ページは次のようになります。

 ------------------------------------
| wrapper                            |
    -----   ------------------
|  |tabs|   |verticalStack    |      |
   -----   ------------------- 
|          |  |accordion   |  |      |
            -------------           
|          |  |usersBox    |  |      |
            -------------        
|          |  |display     |  |      |
            --------------
|          |                  |      |
            ----------------         
|-------------------------------------

ページのサイズを変更すると、veritcalStackdiv（および内部div）はタブdivの下に表示されます。誰かが私にこれが起こる理由と私がそれについて何ができるかを説明してもらえますか、ありがとう。

更新1：構造図にラッパーdivを追加

4

2 に答える 2

4

あなたはあなたの要素を浮かせています。水平方向のスペースがそれを提供するのに十分である限り、それらは並んだままになります。それらを折りたたまないようにする場合は、明示的な幅を持つコンテナー内に配置する必要があります。ただし、これにより、サイズ変更のある時点で水平スクロールバーが作成されます。

<!-- these images will not collapse -->
<div id="container">
  <img src="http://placekitten.com/300/200" />
  <img src="http://placekitten.com/200/200" />
</div>

<!-- these images will collapse -->
<img src="http://placekitten.com/300/200" />
<img src="http://placekitten.com/200/200" />

ワーキングフィドル： http： //jsfiddle.net/jonathansampson/EChrr/

私の提案はこれを受け入れることです。レスポンシブウェブデザインをチェックして、ブラウザの自然な動作を活用する方法を見つけてください。

于 2013-01-10T02:50:36.350 に答える
3

フローティング要素は、十分なスペースがなくなるまで（つまり、ブラウザウィンドウの幅が1110px未満の場合）、並んだままになります。これがデザインのあり方である場合は、＃wrapperの幅または最小幅を1110px幅に設定する必要があります。

また、他の要素との相対的なフロート要素の幅を設定して（つまり、パーセンテージを使用して）、デザインがより小さな解像度でも同様に機能するようにすることもできます。

于 2013-01-10T02:58:44.397 に答える