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;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

在这些情况下，将此规则放在样式的开头是很有用的：

* {
  box-sizing: border-box;
}

它将所有内容设置为box-sizing: border-box;，这意味着边框和填充包含在宽度/高度设置中，即宽度为200px，边框：1px和填充10px的容器将实际为200px宽，包括边框和填充（不 222px，因为它没有box-sizing: border-box）。

一个div内的两个div响应填充

2 个答案: