5

HTML/CSS と Float を扱っているとき、私は長い間この問題を抱えていました。

画像では、これらのボックスが多数あるため、左にフローティングされたボックス Div があることがわかります。ボックスの中に<UL>リストがあります。リスト項目<li>も左にフローティングされます。

画像でわかるように、List 項目は Expand の内部にある Box Div を作成しません。私は多くの運がなくてもいくつかのことを試しましたが、より多くの経験を持つ誰かが助けてくれることを望んでいました? アイコンの数は常に異なり、アイコンを修正するには拡張する必要があるため、Box Div に固定の高さを設定できません。

ここに画像の説明を入力

ライブデモ: http://jsfiddle.net/jasondavis/u5HXu/

<div class="module-box">
    <div class="module-box-title">
        <h4><i class="icon-cogs"></i>Admin Settings</h4>
        <div class="tools">
            <a href="#" class="collapse">-</a>
        </div>
    </div>
    <div class="module-box-body" style="display: block;">


        <ul>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
        </ul>


    </div>
</div>

CSS

/* Modules homepage */
.module-box {
    margin: 0px 0px 25px 25px;
    padding: 0px;
    float: left;
    width: 464px;
}

.module-box-title {
    margin-bottom: 0px;
    padding: 8px 10px 2px 10px;
    border-bottom: 1px solid #eee;
    color: #fff !important;
    background-color: #333;
    height: 51px;
    line-height: 45px;
    border-radius: 3px 3px 0 0;
}

.module-box-title h4 {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    margin-bottom: 7px;
}

.module-box-title .tools {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-top: 6px;
    float: right;
}
.module-box-title .tools a {
    font-size: 31px;
    color: #fff;
    text-decoration: none;
    line-height: 29px;
}

.module-box-body {
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    padding: 10px;
    clear: both;
}

.module-box-body a {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 11px;
    color: #888;
    text-decoration: none;
}

.module-box-body li {
    float: left;
    margin: 0 12px 0 0;
    list-style: none;
}
4

4 に答える 4

12

clearfix または clearing 要素を使用してフロートをクリアする必要があります。

方法 #1 クリアフィックス

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

次に、包含要素にクラスを追加します

 <div class="module-box-body clearfix" style="display: block;">

http://jsfiddle.net/u5HXu/8/

方法 #2 クリア要素

.clear {
    clear: both;
}

次に、フローティング要素の後に次の HTML を追加します。

<div class="clear"></div>

http://jsfiddle.net/u5HXu/9/

于 2013-02-27T21:41:48.633 に答える
7

overflow: hidden親コンテナ（..module-box-body）でトリックを使用できます;）すべてを修正します。

http://jsfiddle.net/teddyrised/ct6gr/

于 2013-02-27T21:42:35.990 に答える
2

に変更.module-box-body liします

.module-box-body li {
    display: inline-block;
    margin: 0 12px 0;
    list-style: none;
}

フィドルを更新しました。

于 2013-02-27T21:44:05.363 に答える
1

overflow:auto内容物 (浮遊アイテム) の高さに基づいて高さを変更したいコンテナーに適用してみてください。

jsfiddle リンクを追加しますが、最近はまったく機能していません。:/

于 2013-02-27T21:41:58.677 に答える