4

私の Web ページには、コンテナー DIV があり、その中にメニュー DIV とコンテンツ DIV があります。コンテンツ DIV 内にいくつかの「設定」DIV を配置しています。それらをコンテンツ DIV 内で左にフロートさせたいのですが、下位の DIV はメニュー DIV の下になります。

このjsfiddleを確認して、明確に確認してください：http://jsfiddle.net/4KUTy/5/

のsettings divsプロパティがありますがfloat:right;、最後のものが間違った位置に残り、 Ifloat:left;の場合、メニューの下に移動します。

助けてください。

ここにjsfiddle htmlコード：

<html>
<head/>
<body>
<div id="container">
    <div class="menu">
        <ul>
            <li>menu option 1</li>
            <li>menu option 2</li>
            <li>menu option 3</li>
            <li>menu option A</li>
            <li>menu option B</li>
            <li>menu option C</li>
        </ul>
    </div>
    <div id="content">
        <div class="settings_div">Project Settings<br/>
    <ul style="display:inline-block">
        <li>language</li>
        <li>currency</li>
        <li>mark up</li>
    </ul>
</div>     
<div class="settings_div">Your Company Settings<br/>
    <ul style="display:inline-block">
        <li>company details</li>
        <li>bank details</li>
        <li>contact details</li>
    </ul>
</div>
<div class="settings_div">Output Settings   <br/>
    <ul style="display:inline-block">
        <li>company logo</li>
        <li>date format</li>
        <li>fonts etc</li>
    </ul>
</div>
<div class="settings_div">Graphical Settings<br/>
    <ul style="display:inline-block">
        <li>colors</li>
        <li>text size</li>
        <li>more</li>
    </ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
    <ul style="display:inline-block">
        <li>But NOT under the menu</li>
        <li>float:left puts it under the menu</li>
        <li>should be under graphical settings</li>
    </ul>
</div>
    </div>            
 </div>
</body>
</html>

ここにjsfiddle css：

.settings_div {
    text-align:left;
    display:inline;
    width:300px;
    height:80px;
    padding:20px;
    padding-top:10px;
    margin:20px;
    margin-top:0px;
    margin-bottom:20px;
    border-color:#33CCCC;
    border-style:solid;
    border-width:thick;
    float:right;
}

#content {
    width:600;
    min-height:620px;
    vertical-align:top;
    display: inline;
}

.menu { 
    padding:5px;
    background-color:#33CCCC;
    float:left;
    text-align:left;
    width:auto;
}

#container {
    margin-bottom:10px;
    background-color:#eee;
    width:950px;
    min-height:620px;
    border-radius:0px;
    position:relative;
    margin-top:-10;
    margin-right:auto;
    margin-left:auto;
    overflow: visible;
}
4

6 に答える 6

3

フローティング div のコンテナーには、次のものが必要です。

overflow: hidden; /* Makes the container actually "contain" the floated divs */
display: block;

フローティング div は

float:left

フィドル: http://jsfiddle.net/4KUTy/5/

なぜオーバーフローが隠されているのかを説明しようとする素敵な投稿を見つけました: http://colinaarts.com/articles/the-magic-of-overflow-hidden/

リンクが無効になった場合: オーバーフローを可視以外のものに設定すると、新しいブロック フォーマット コンテキスト ( http://www.w3.org/TR/CSS21/visuren.html#block-formatting ) が確立されます。

于 2013-02-18T16:07:26.473 に答える
2

ここで 2 つのことが間違っています。

  • ラッパー div.content は、display: inline に設定されています。
  • すべての子要素がフローの外にあるため、ラッパー div.content は正しくスケーリングされません。

設定 div を正しく動作させるには、次を使用します。

 .content { display: block; overflow: hidden; }

そして、すべての設定divを左にフロートします。

更新されたフィドルを参照してください: http://jsfiddle.net/4KUTy/7/

于 2013-02-18T16:07:09.740 に答える
0

最後の div の前にプレースホルダー div を追加するだけです

<div class="settins_div placeholder">placeholder</div>

css-rule を追加します

.placeholder{
visibility: hidden;
}

チェックするjsfiddleがあります：こちら

于 2013-02-18T15:59:40.667 に答える
0

すべてを作成しますsettings_div float:left;が、右に浮いて十分な幅がある別のコンテナーを使用します。

<div id="setting-container" style="float:right;width:800px;">
    <div class="settings_div">Your Company Settings<br/>
        <ul style="display:inline-block">
            <li>company details</li>
            <li>bank details</li>
            <li>contact details</li>
        </ul>
    </div>
    <div class="settings_div">Output Settings   <br/>
        <ul style="display:inline-block">
            <li>company logo</li>
            <li>date format</li>
            <li>fonts etc</li>
        </ul>
    </div>
    <div class="settings_div">Graphical Settings<br/>
        <ul style="display:inline-block">
            <li>colors</li>
            <li>text size</li>
            <li>more</li>
        </ul>
    </div>
    <div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
        <ul style="display:inline-block">
            <li>But NOT under the menu</li>
            <li>float:left puts it under the menu</li>
            <li>should be under graphical settings</li>
        </ul>
    </div>
</div>

jsfiddle

于 2013-02-18T16:00:34.310 に答える
0

ここに私の結果がありますhttp://jsfiddle.net/burn123/4KUTy/10/

主な変更点

  • 多くのfloatプロパティをに変更しましたdisplay:inline-block。これは、すべての要素が正しく配置されるようにするためです。
  • の幅を外したcontainerので、応答性が少し向上するはずです
  • settings_divクラスを削除し、CSS を変更し#content divてコードを保存しました
  • CSSの に追加display:inline-blockされ、インライン スタイルから削除されましたul
  • かなり大きな問題は、width:600必要に応じてコンテンツのプロパティを に設定していたことですwidth:600px;。結局、このスタイルを削除しました。
  • #containerのポジショニングにセットしていたのでrelative、私はに変更margin-top:-10;しましたtop:-10px;

小さな変化

  • marginやなどの多くのプロパティを凝縮border
  • width、overflow、およびmin-heightは目的を果たさなかったため、コンテナから削除しました

更新- http://jsfiddle.net/burn123/4KUTy/12/

  • 指定した正確な幅が表示されるように、すべての要素に追加border-boxされます
  • 流動的な幅を追加してcontainer、必要に応じてメニューとインラインで表示されるようにしますが、いっぱいになるとドロップダウンします
于 2013-02-18T16:38:00.127 に答える
0

CSS ルールには小さな変更のみがあります。

メニューに固定幅を追加する必要があります。

.menu { 
    padding:5px;
    background-color:#33CCCC;
    float:left;
    text-align:left;
    width:150px;
}

そして、コンテナをその値 + マージンだけ右に「移動」する必要があります。それに amargin-leftを追加します。

#content {
    width:600;
    min-height:620px;
    vertical-align:top;
    margin-left: 160px;
}

に設定#containerしますoverflow: hidden。

そして今、すべての設定 div を左にフロートする必要があります。

jsfiddle の更新バージョン: http://jsfiddle.net/4KUTy/8/

于 2013-02-18T16:03:18.373 に答える