Html 两个内联div不符合宽度

我不确定这里到底发生了什么，因为我无法定位两个div，因为它们不遵守宽度规则

col3

设置为40%宽度，按照我的理解，子元素应该能够使用该空间的100%

如何设置

.small left

和

.small right

，每一个都有15px的内联填充

这是我的密码：

#content #col3 {
padding-left: 15px;
width: 40%;
}

.double .small-left {
display:inline;
width:50% !important;
display:inline-block;
padding-right:15px;
border-right:1px solid #E2E2E2 !important;
}

.double .small-right {
display:inline;
width:50% !important;
border:none !important;
display:inline-block;
padding-left:15px;
}

<div class="double">
  <div class="small-left">111</div>
  <div class="small-right">111</div>
</div>

#内容#col3{
左侧填充：15px；
宽度：40%；
}
.双人间，左小号{
显示：内联；
宽度：50%！重要；
显示：内联块；
右侧填充：15px；
右边框：1px实心#e2！重要；
}
.双人，小号，对吗{
显示：内联；
宽度：50%！重要；
边界：没有！重要；
显示：内联块；
左侧填充：15px；
}
111
111

不能将宽度应用于

内联

元素

您必须使用

display:block

或

display:inline block

。对于您在评论中提到的问题，添加以下内容：

box-sizing: border-box;

---

从css部件中删除

显示：内联块

以下是演示：

---

删除display:inline和display:inline块并添加以下规则：

.double > div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

---

填充和边框也包含在块宽度中。因此，如果您有一个100px的容器，并将其宽度设置为50%，填充15px，则实际宽度将为65px。您可以通过将填充设置为百分比来解决此问题

.double .small-left {
    width:40%;
    display:inline-block;
    padding-right:9%;
    border-right:1px solid #E2E2E2 ;
}

.double .small-right {
    width:40%;
    border:none;
    display:inline-block;
    padding-left:10%;
}

---

下面是一个演示：

为什么要使用

display:inline和
显示：内联块
？是一个或另一个，最后一个赢。是的，那是个错误。我需要删除内联。我现在就这么做。米格，我现在有了服从宽度的div，但它们彼此重叠。如果我降低宽度，它们将成直线。那么，如何让两个div占据所有空间？@NaN请检查我的答案，以解决元素相互堆积的问题谢谢。我看行得通。如何让两个div都占据所有空间？您可以使用float:right to right div和float:left to left，也可以使用box size:border box谢谢。我仍在为宽度问题而挣扎。我刚刚试着在两个元素上使用浮动，但所有元素都不对齐。两个div都有15px的填充和50%的宽度，因此填充后宽度将超过100%。尝试使用float属性将div设置为45%的宽度。@NaN：检查这个fiddle：所以填充和div宽度不能超过100%。谢谢。这是否允许两个div使用父容器中的所有空间？您的
宽度：50%将执行此操作。。添加
框大小：边框框
以及其他样式将确保
填充
是从元素的现有宽度指定的w，感谢您的解释！我不知道这是为什么。所以，我刚刚添加了框大小：边框框；这两个元素都有，但它们仍然是一个在另一个之上。谢谢DRD。我用了你的规则，不幸的是，浮标把其他的东西都弄乱了。是的，你必须清除浮标。将clearfix类应用于浮动元素的容器：。
.double .small-left {
    width:40%;
    display:inline-block;
    padding-right:9%;
    border-right:1px solid #E2E2E2 ;
}

.double .small-right {
    width:40%;
    border:none;
    display:inline-block;
    padding-left:10%;
}