1つのdiv内の2つのdivがパディングに反応します

Question

私の問題は、CSS内のパディングを使用して、div内の2つのdivがそれぞれ50％で応答することです。しかし一緒に彼らは明らかに100％より大きいです。私はこれがおそらく詰め物の欠陥であることを知っているが、私はそれを修正する方法を知らない。 CSS：

.columns { 
max-width:100%; 
width:100%; 
display:inline-block; 
text-align:left; 
} 
.col1 { 
width:50%; 
float:left; 
padding-left:100px; 
} 
.col2 { 
width:50%; 
float:right; 
padding-right:100px; 
} 

HTML：

<div class="columns"> 
     <div class="col1"> 
     </div> 
     <div class="col2"> 
     </div> 
    </div> 

Answer 1

デフォルトではボックスモデルは、指定された幅を超えて要素を拡大し、パディングとボーダーを使用します。外側に押してからパディング/ボーダーを維持し、内側にそれらを含む、このような状況ではbox-sizing: border-box;

.columns { 
 
    max-width: 100%; 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: left; 
 
} 
 

 
.col1 { 
 
    width: 50%; 
 
    float: left; 
 
    padding-left: 100px; 
 
} 
 

 
.col2 { 
 
    width: 50%; 
 
    float: right; 
 
    padding-right: 100px; 
 
} 
 

 
.col1, 
 
.col2 { 
 
    box-sizing: border-box; 
 
}

<div class="columns"> 
 
    <div class="col1"> 
 
    </div> 
 
    <div class="col2"> 
 
    </div> 
 
</div>

Answer 2

を使用するには、それはあなたのスタイルの先頭にこのルールを置くと便利です。

* { 
    box-sizing: border-box; 
} 

すべてをbox-sizing: border-box;に設定しています。つまり、幅と高さの設定には枠と詰め込みが含まれています。つまり、幅：200ピクセル、境界：1ピクセルのコンテナ境界線とパディング（ではなく 222pxではなく、box-sizing: border-boxがないため）を含む10pxの幅は実際に200ピクセルです。