0

例

親の隣接要素が浮いている場合、親は動的であれば要素の幅を感じません。クロムとオペラでは正常に動作します。

<div class="b-wrap">
    <div class="b-content">
        <div class="b-rect-left"></div>
        <div class="b-rect-right"></div>
        <div class="b-child-cont">джигурдаололо</div>
    </div>
</div>

.b-wrap {
    background-color: red;
    height: 50px;
   float: left;
}

.b-content {
    margin: 5px;
    overflow: hidden;
}

.b-rect-left {
    width: 40px;
    height: 40px;
   float: left;
    background-color: orange;
}

.b-rect-right {
    width: 30px;
    height: 30px;
    float: right;
    background-color: green;
}

.b-child-cont {
    overflow: hidden;
}
4

2 に答える 2

0

このFirefoxの例外を追加するだけです

@-moz-document url-prefix() {
.b-wrap{width:175px;}
}
于 2013-03-30T14:44:19.590 に答える
0

Firefox は、フロートを含む要素の幅を Chrome とは異なる方法で計算しました。どうしてか分かりません。

ただし、次のようなことが起こっているようです。

スニペットの実際のコンテンツはb-child-cont、非フローティング要素である にあります。他の 2 つの要素 (および) はフローティングであり、コンテンツの幅のb-child-cont決定には考慮されないため、 は の幅を決定します。同様に、 の幅は の幅を設定します。これは、がフロートし、その子要素の幅を取るためです。b-contentb-rect-leftb-rect-rightb-contentb-wrapb-wrap

デザイナーおよび開発者は、2 つの浮動要素用にある程度のスペースを確保する必要があります。これはさまざまな方法で行うことができます。2つの例を挙げます。

(1) に左右のマージンを追加しb-child-contます。

.b-child-cont {
    overflow: hidden;
    background-color: yellow;
    margin-left: 40px;
    margin-right: 30px;
}

(注: 要素の範囲を示すために背景色を追加しました。) 40px と 30px の値は、それぞれ左右の正方形要素の幅に基づいています。

(2) float を含む親要素に with を指定することもできます。

.b-child-cont {
    overflow: hidden;
    background-color: yellow;
    text-align: center;
}
.b-content {
    width: 30em;
}

この場合、 withb-contentを 30em に設定し (適宜調整できます)、テキストを の中央に配置しましたb-child-cont。

CSS ボックス モデルの計算方法において、ブラウザ間の不一致に遭遇しました。それを認識したら、それを中心に設計する必要がありますが、それはそれほど難しいことではありません。

フィドルのリファレンス: http://jsfiddle.net/audetwebdesign/dzK73

于 2013-03-30T15:11:32.703 に答える