html - 右 DIV 标签不适用于填充

Question

我有两个水平对齐的 div，但右侧 div 的填充不起作用。我正在尝试在单词左侧添加填充:“RIGHT DATA”

我的 HTML 看起来像这样:

<div class="post-main-content">
  <div class="post-left">
    LEFT DATA  
  </div>
  <div class="post-right">
    RIGHT DATA
  </div> 
</div>

CSS:

.post-main-content {
    height:350px;
    background-color: #f3f3f3;
    padding-top: 20px;
}

.post-right {
    width:100%;
    height:100%;
    padding-left:20px; 
}

.post-left {
    width:100px;
    height:100%;
    float:left;
    padding-left: 20px;
    position: relative;
    border-right: 1px solid #E5E5E5;
}

我是否错误地对齐了两个 div？

你可以看到一个jsfiddle here

有什么想法吗？

Answer 1

你需要添加 margin-right: 20px; 到左边的 div b/c 填充相互抵消

Fiddle

你还需要清除 float 。

参见 Clearfix

---

编辑:

有人提到了border-box，这也是对的。对于诸如 bootstrap 和 foundation 之类的框架，这些已经与所有元素相关联。当您将元素彼此相邻 float 时，它们需要应用某种宽度。如果 float 元素应用了边距、边框或填充，则浏览器完成的宽度计算是在没有应用这些样式的情况下完成的。因此，将 float 元素向下移动。

添加总是一个好主意

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

另外，right-div 有 width: 100%;。如果我们将其更改为使用 calc(100% - 100px); - 因为左侧 div 的宽度为 100px，那么无需添加 margin-right:20px 在左边的 div 上

Updated Fiddle