兩個div內的一個div響應填充

Question

我的問題是，我試圖在我的CSS中使用填充，以便我的div中的兩個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;，這意味着邊框和邊框包含在寬度/高度設置中，即寬度爲200px，邊框爲1px的容器nd填充10px將真的是200px寬，包括邊框和填充（和而不是 222px，因爲它將沒有box-sizing: border-box）。