两个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）。