在这个jsfiddle中.four
,我想将div的宽度表示为剩余屏幕空间的百分比,而不是总屏幕宽度。但是由于层次结构中的前三个div是浮动的,因此目前不会发生这种情况。
我需要做什么才能根据剩余的水平屏幕空间定义.four
宽度?
只需从此类中删除宽度.four
它将自动覆盖剩余空间。并给出margin-left
three div's
值的总和,而不是fourth div
在三个div之后开始
.CSS
.four{
background-color:black;
color:white;
margin-left:360px;
}
演示
据我所知,您必须将其包装在占据剩余宽度 100% 的父元素中,以便您可以使 .four 成为其中的百分比。
为了让父元素占用剩余空间,嗯,它并不漂亮,但最好的选择可能是采用表格显示样式。 演示
标记
<div class="menu-outer-outer">
<div class="menu-outer">
<div class="menu one">first</div>
<div class="menu two">second</div>
<div class="menu three">third</div>
<div class="four-container">
<div class="four">helloworld</div>
</div>
</div>
</div>
风格
.menu-outer-outer {
display: table;
width: 100%;
}
.menu-outer {
display: table-row;
}
.menu{
display: table-cell;
height:240px;
width:120px;
}
.one{
background-color:red;
}
.two{
background-color:blue;
}
.three{
background-color:green;
}
.four-container {
display: table-cell;
width: auto;
}
.four {
background-color:black;
color:white;
width: 60%;
}
绝对定位是一种解决方案,但一旦屏幕尺寸变小,您可能会遇到问题。http://jsfiddle.net/kudoslabs/HMydq/
.four{
background-color:black;
color:white;
position: absolute;
left: 360px ;
right: 0;
}