我的布局涉及左侧的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;
}
是否有可能实现这种布局(一个固定宽度的元素旁边另一个填充剩余空间的元素)没有诉诸我正在使用的填充方法?我的问题是我想在左浮动元素上使用透明背景,因此隐藏在这些元素下面的填充将是可见的。此外,我目前的做法并没有流畅地缩小规模。
答案 0 :(得分:1)
为此,您还需要float: left;
其他元素..
.right {
width: calc(100% - 40px);
background: blue;
float: left;
}
另外,我在这里使用calc()
,从width
右侧栏中扣除40px
固定的100%
边栏。
作为@Krimson commented你想要在元素之间留出一些空间,而不是使用margin
.right {
width: calc(100% - 80px);
background: blue;
float: left;
margin-left: 40px;
}
注意:在演示中,我使用overflow: hidden;
作为清除浮动的快速修复,但更好地使用clear: both;
,有关清除浮动的更多信息,您可以阅读我的答案{{3 }}
检查元素
答案 1 :(得分:1)
如果您将.right
更改为此内容,该怎么办:
.right {
/* width: 100%; remove width */
margin-left: 50px; /* Margin instead of Padding */
background: blue;
}