JSFiddle Demo

Question

我的布局涉及左侧的div.left，设置宽度为40px，右侧的div.right宽度为100％，以填充剩余的父容器空间。< / p>

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

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

enter image description here

Answer 1

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

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

Demo

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

enter image description here

作为@Krimson commented你想要在元素之间留出一些空间，而不是使用margin

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

Demo

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

检查元素

enter image description here

Answer 2

如果您将.right更改为此内容，该怎么办：

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

处理CSS余数时避免元素重叠

2 个答案:

JSFiddle Demo