Html 右DIV标记不使用填充

我有两个分区水平对齐，但右分区的填充不起作用。我试图在单词的左边添加填充：“右数据”

我的HTML如下所示：

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

我是否将两个div对齐错误

你可以看到一个

---

有什么想法吗？

您需要添加

右边距：20px在左侧分区b/c，填充物相互偏移


此外，您还需要清除浮动

看


编辑：

有人提到了边框框，这也是正确的。使用Bootstrap和Frand等框架，这些已经是相关的W/ALL元素。当浮动元素彼此相邻时，它们需要应用某种宽度。如果浮动元素应用了边距、边框或填充，则浏览器执行的宽度计算将在不应用这些样式的情况下完成。在此之前，向下移动浮动元素

这总是一个好主意添加

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

而且，
右侧div
的宽度为
100%。如果我们将其更改为使用
calc（100%-100px）-由于左div的宽度为100px，因此它不需要在左div上添加
边距right:20px

类的宽度.post right具有总宽度，因此为类的左边距指定.post left的宽度+填充

`http://jsfiddle.net/jorisros/9y3fdc7o/` 

因为它是水平div，所以填充应该从最左边的页面内容开始计算，因此应该大于120px。
你所说的“填充物相互抵消”是什么意思？这似乎更多的是因为只有一个
被浮动。是不是我最初的想法和误读，两个div都被分配了“padding left”“，本以为一个是对的，另一个是左的，但后来我看到了浮动问题。@Rob Scott浮动问题是什么？@Rob Scott我不知道你可以快速计算css宽度……这是不受欢迎的吗？@Paul看到了。
。post left
是浮动的，
。post right
不是。因此，
.post left
从文档流中删除，而
.post right
实际上存在于文档流后面。因此，
.post right
上的
填充左
，一直存在于页面左侧，
.post left
后面。
.post right
中的文本环绕浮动的
.post left
，将文本向右推，并使
.post right
上的填充不会影响文本@这有助于解释我所看到的。我只需要把右边的柱子浮到右边吗？你可以。你也可以，正如罗伯·斯科特所建议的那样。这里的其他答案也以各种方式解决了这个问题。我只是没有在提交的任何答案中看到问题的解释。
`http://jsfiddle.net/jorisros/9y3fdc7o/` 

padding-left: 140px;