1

私の要素を調べたとき、私は最初の李の私の高さが非常に低いことに気づきました。

「都市(2)」を選択した後、李全体に背景を追加しようとしています。

背景はニューヨークのCity(2)の半分だけを占めています。浮かせずに試してみましたが、並べられません。

写真を2枚追加しました。浮いているものと浮いていないものがあります。

フローティング付き

浮かないで

<ul class="specs">
        <li>
            <div class="trigger">› City (2)</div>
            <div class="cityByLocation">
                <ul>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › New York
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › Chicago
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                </ul>
            </div>
        </li>
<ul>

css:

.cityName{
    float: left;
    width: 45%;
}


.cityDistance {
    float: left;
    width: 20%;
}

.specs {

    padding: 0;
}

.specs li {
    padding: 0;
    padding-top: 10px;

    list-style: none;
}

.specs ul {
    list-style: none;
    padding: 0;
}
4

3 に答える 3

4

エリックが言ったように、フロートをクリアする必要があります。これを実現する最も簡単な方法はoverflow: hidden、コンテナに適用することです。

.cityByLocation {
    overflow: hidden;
}

http://jsfiddle.net/a3GLG/

于 2012-11-26T17:29:57.853 に答える
2

これで問題は解決すると思います。

この問題は、フロートされた要素がコンテナボックス内にある場合に発生します。その要素は、コンテナの高さをフロートされた要素に自動的に調整しません。要素がフロートされると、フロートがフローから削除されるため、その親には要素が含まれなくなります。

あなたはそれを修正するために2つの方法を使うことができます:

{clear:both}または.clearfix

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

ソース

于 2012-11-26T17:13:33.733 に答える
0

elementに設定overflow: hiddenして修正することもできます。li高さをクリアして自動計算します。

- アップデート -

ありがとう@mickmackusa

https://jsfiddle.net/e94pzbbn/1/

于 2017-11-19T19:31:32.750 に答える