html - 两个内联 div 不遵守宽度

Question

我不太确定这里发生了什么，因为我无法将两个 div 内联放置，因为它们不遵守宽度规则。

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

如何设置 .small-left 和 .small-right，每个都有 15 像素的内边距？

这是我的代码:

#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

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