Question

我不确定这里发生了什么，因为我无法将两个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>

Answer 1

您无法将宽度应用于inline元素。

您必须使用display: block或display: inline-block。对于您在评论中提到的问题，请添加以下内容：

box-sizing: border-box;

Answer 2

从css部分删除display:inline-block。

以下是演示：fiddle Demo

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

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

Answer 3

删除display：inline和display：inline-block并添加以下规则：

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

Answer 4

填充和边框也包含在块宽度中。因此，如果您有一个100px的容器并使用15px填充将其宽度设置为50％，则实际宽度将为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%;
}

以下是演示：http://jsfiddle.net/78xt9/2/

两个内联div不符合宽度

4 个答案: