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

时间:2014-02-20 06:44:03

标签: html css css-float fluid-layout

我的布局涉及左侧的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

2 个答案:

答案 0 :(得分: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

enter image description here

答案 1 :(得分:1)

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

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

JSFiddle Demo