【问题标题】：Avoid element overlap when dealing with CSS remainder处理 CSS 余数时避免元素重叠
【发布时间】：2014-02-20 15:57:24
【问题描述】：

我的布局涉及左侧的 div.left 设置宽度为 40 像素，右侧的 div.right 宽度为 100% 以填充剩余的父容器空间。

HTML：

<div class="parent">
    <div class="left">
        L
    </div>
    <div class="right">
        R
    </div>
</div>

CSS：

.parent {
    background: maroon;
    max-width: 500px;
}
.left {
    float: left;
    background: green;
    width: 40px;
    opacity: 0.7;
}
.right {
    width: 100%;
    padding-left: 50px;
    background: blue;
}

Jsfiddle

是否有可能实现这种布局（一个固定宽度的元素紧挨着另一个填充剩余空间的元素）而不使用我当前使用的填充方法？我的问题是我想在左浮动元素上使用透明背景，因此隐藏在这些元素下方的填充将是可见的。此外，我目前的方法并没有流畅地缩小规模。

【问题讨论】：

标签： html css css-float fluid-layout

【解决方案1】：

为此，您还需要float: left; 其他元素..

.right {
    width: calc(100% - 40px);
    background: blue;
    float: left;
}

Demo

另外，我在这里使用calc()，从100%右栏减去固定的width侧边栏，即40px。

作为@Krimson commented，您也希望元素之间有一些空间，而不是使用margin

.right {
    width: calc(100% - 80px);
    background: blue;
    float: left;
    margin-left: 40px;
}

Demo

注意：在演示中，我使用overflow: hidden;作为清除浮动的快速修复，但最好使用clear: both;，有关清除浮动的更多信息，您可以阅读我的答案here。

检查的元素

【讨论】：

这行不通。如果你注意到。 OP 正在添加一个 50 像素的填充，而左边的栏只有 40 像素，这意味着他想要在中间留出一个空隙。向两个元素添加浮点数不会产生间隙
您在演示中添加了左边距。您答案中的 css 没有：|
@Krimson 这就是我的意思，我已经回答了他的问题，他可以根据他的要求进行调整
@Krimson 另外，如果您在解决方案中看到，该元素会溢出。jsfiddle.net/7ubS2/1 在我的情况下，它不会 jsfiddle.net/4REh3/3
我猜如果你删除宽度：100% 在我的你不会得到溢出

【解决方案2】：

如果你把你的 .right 改成这样：

.right {
    /* width: 100%; remove width */ 
    margin-left: 50px; /* Margin instead of Padding */
    background: blue;
}

JSFiddle Demo

【讨论】：