1

私はこれを長い間見てきましたが、ここで何が起こっているのかわかりません。なぜこれがこのように機能するのか、誰かが私にヒントを与えることができますか?Firefox、Chrome、IEはすべて同じ結果になります。

この例では、コンテナの幅は1000pxに設定されており、内部divがコンテナをオーバーフローしています:http: //jsfiddle.net/S65Hv/

この例では、コンテナの幅を300pxに変更しただけです。その結果、内部アイテムの高さはコンテナ内にあり、オーバーフローは発生しません。http: //jsfiddle.net/5EwTG/

コード:

<style>
    .container {
        position: absolute; 
        top: 10px; 
        left: 10px; 
        width: 1000px; 
        height: 300px; 
        border: 1px solid grey;
    }

    .item {
        width: 48%;
        height: 48%;
        float: left;
        position: relative;
        margin: 1%;
    }

    .innerItem {
        border: 1px solid red;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }        
</style>    

<div class="container">
    <div class="item">
        <div class="innerItem">
        </div>        
    </div>        
    <div class="item">
        <div class="innerItem">
        </div>           
    </div>
    <div class="item">
        <div class="innerItem">
        </div>           
    </div>
    <div class="item">
        <div class="innerItem">
        </div>           
    </div>    
</div>

内部divの高さはパーセンテージで表され、マージンを含めて合計が100%になります。

私の知る限り、300pxの高さの100%は常に同じであり、幅に依存しないはずです。

これは仕様によるものですか?もしそうなら、なぜですか?

4

5 に答える 5

2

これがパーセンテージ マージンの仕組みです。パーセンテージ マージンは、幅のパーセンテージに基づいています。

http://www.w3.org/TR/CSS2/box.html

パーセンテージは、生成されたボックスの包含ブロックの幅に対して計算されます。これは「margin-top」と「margin-bottom」にも当てはまることに注意してください。

于 2013-02-05T21:29:34.513 に答える
2

宣言すると、親要素のmargin: 1%に基づいて 4 つのマージンすべてが設定されます。したがって、この場合、幅は高さに影響します。

于 2013-02-05T21:30:25.120 に答える
0

絶対配置要素は、親と同じレイアウト コンテキストではなくなりました。彼らは、親アイテムがどこにあるのか、どのくらいの大きさなのかわかりません。

したがって、パーセンテージ単位を使用して、親アイテムとの関係でサイズが変更されることを期待することはできません。

于 2013-02-05T21:27:00.370 に答える
0

幅に対して 1% のマージンが設定されているようです。js を使用してマージンを計算し、設定することができます。

于 2013-02-05T21:33:27.167 に答える
0

マージンが内側のボックスのオーバーフローに影響を与えています。これには多くのアプローチがありますが、余白を調整して内容器の高さと幅を固定することができますdiv。これは修正された例です:

http://jsfiddle.net/S65Hv/21/

@Aaronが言ったように、JSを使用してこれを支援できます。

于 2013-02-05T21:34:44.393 に答える