Question

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

我的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;添加到左边的b / c，填充相互抵消

Fiddle

此外，您需要清除浮子。

请参阅Clearfix

修改

有人提到了边框，这也是正确的。使用bootstrap和foundation等框架，这些框架已经与所有元素相关联。当您将元素浮动到彼此旁边时，它们需要应用某种宽度。如果浮动元素应用了边距，边框或填充，则浏览器完成的宽度计算不会应用这些样式。因此，将浮动元素向下移动。

添加
总是一个好主意
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

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

Updated Fiddle

Answer 2

类.post-right的宽度具有总宽度，因此给类边距 - 左边的.post-left

的宽度+填充

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

Answer 3

padding-left: 140px;

由于它是水平div，因此填充应该从最左边的页面内容开始计算，因此它应该超过120px。 http://jsfiddle.net/rvoj81dc/

右DIV标记不使用填充

3 个答案: