根据可用空间表示浮动元素旁边的div的宽度

时间:2012-11-16 08:54:23

标签: css css-float width percentage

在此jsfiddle中,我想将.four div的宽度表示为剩余屏幕空间的百分比,而不是总屏幕宽度。但由于层次结构中前面的三个div浮动,目前这种情况并未发生。

如何根据剩余的水平屏幕空间定义.four的宽度,我需要做什么?

3 个答案:

答案 0 :(得分:2)

只需从此类.four中移除宽度,它就会自动掩盖剩余空间。 并且margin-left总共three div's值将超过fourth div将在三个div之后开始

<强> CSS

.four{
background-color:black;
color:white;
margin-left:360px;    
}

DEMO

答案 1 :(得分:1)

据我所知,你必须将它包装在一个占据剩余宽度100%的父元素中,这样就可以使.four占其中的一定百分比。

要让父元素占用剩余空间,嗯,它不漂亮,但最好的选择可能是采用表格显示样式。 Demo

<强>标记

<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%;
}

答案 2 :(得分:0)

绝对定位是一种解决方案,但是一旦屏幕尺寸变小,您可能会遇到问题。 http://jsfiddle.net/kudoslabs/HMydq/

.four{
background-color:black;
color:white;
position: absolute;
left: 360px ;
right: 0;   
}