CSSボーダーの問題

現在、4つの小さな正方形で正方形を作りようとしていますが、私がやろうとしている方法で問題を抱えています。だから、これはコードです：私は国境のCSSスタイルを作りたかったCSSボーダーの問題

#grandbox { 
 
    position: absolute; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
</div>

：

border: 2px solid black

しかし、私は箱がちょうどから抜け出すことを行う場合大きなボックスと垂直方向に表示されます。

私は現在、キャリアを開始しているので、これはかなり初心者ですが、なぜそれが機能しないのか理解できません。

PS：申し訳ありませんが悪い英語、私の母国語です。

出典

2016-08-05 Yacomini

通常、境界幅は指定された幅に加算されます。 box-sizing: border-box;ルールでは、境界線を幅に含めることができます。これにより、もはやブレークがありません。このスニペットを参照してください。

#grandbox { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
    box-sizing: border-box; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
</div>

は、ボックスのサイズ変更の詳細については、https://developer.mozilla.org/de/docs/Web/CSS/box-sizingを参照してください。

出典

2016-08-05 13:16:39 andreas

だから、私はそれのサイズにどのようにブラウザを語っていませんでしたか？これを説明していただきありがとうございます！ – Yacomini

あなたはあなたの幅の指示に罫線を含めるようブラウザに指示していませんでした。つまり、 '.smallbox'要素は境界幅のために100pxより大きかったです。 – andreas

ブラウザは標準ボックスモデル_by default_を使用します。 'box-sizing：border-box'では、IE6のボックスモデルに相当するものに切り替えるように指示しています。これは非常に軽蔑されていました。 https://css-tricks.com/box-sizing/で非常に良いサマリー（あなたは擬似IMHOでボックスサイジングは必要ありませんが、このユニバーサルボックスとは別に天才です。使用しているボックスモデルを使用して、別のボックスモデルを使用するプラグインを混在させることができます） – FelipeAls

外側のボックスはrelativeに、内側の4つのボックスabsoluteにしてください。次に、leftrighttopbottomのプロパティを使用して配置するだけです。

#grandbox { 
 
    position: relative; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
} 
 
div.sb1 { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
div.sb2 { 
 
    top: 0; 
 
    right: 0; 
 
} 
 
div.sb3 { 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
div.sb4 { 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox sb1"> 
 

 
    </div> 
 
    <div class="smallbox sb2"> 
 

 
    </div> 
 
    <div class="smallbox sb3"> 
 

 
    </div> 
 
    <div class="smallbox sb4"> 
 

 
    </div> 
 
</div>

ここjsbinバージョンです。

出典

2016-08-05 13:13:48

編集：私の答えは、ハックの解決策です。 上記のには、幅に罫線を自動的に入れたボックスサイズが組み込まれています。

元の高さと幅（204）の計算では、各四角形の両側をさらに4ピクセル大きく計算していないと思います。

幅と高さを208ピクセルに調整すると問題が解決します。

#grandbox 
 
    { 
 
     position: absolute; 
 
     width:208px; 
 
     height:208px; 
 
     border: 2px solid black; 
 
     left:40%; 
 
     top: 8%; 
 
    } 
 

 
div.smallbox 
 
    { 
 
     border: 2px solid black; 
 
     text-align: center; 
 
     width: 100px; 
 
     height: 100px; 
 
     float: left; 
 
     line-height: 100px; 
 

 
    }

<body> 
 
    <div id="grandbox"> 
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    </div> 
 
</body>

出典

2016-08-05 13:17:11 Adam

答えて

関連する問題