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

【问题标题】：Expressing the width of a div next to floated elements in terms of free space用可用空间表示浮动元素旁边的 div 的宽度
【发布时间】：2012-11-16 18:06:11
【问题描述】：

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

我需要做什么才能根据剩余水平屏幕空间定义.four 的宽度？

【问题讨论】：

标签： css css-float width percentage

【解决方案1】：

只需从此类中删除宽度.four 它会自动覆盖剩余空间。并给出margin-leftthree div's 的总值比fourth div 将在三个 div 之后开始

CSS

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

DEMO

【讨论】：

这不允许我根据剩余空间定义 .four - 应用百分比宽度仍将是整个屏幕，除非我遗漏了什么？
你遗漏了一些东西，因为我已经根据你的要求制作了演示，检查你的代码是否正确，你做错了什么，或者告诉我们你在哪里应用这个东西......
您遗漏了一些东西 - 特别是 - 我想将 .four div 的宽度表示为剩余屏幕空间的百分比，而不是总屏幕宽度。您的解决方案不允许我用剩余屏幕空间来表达该 div 的宽度。
占剩余屏幕空间的百分比 - 所以，当我定义 width:60%;我希望它是（身体减去 3 个浮动 div）宽度的 60%，而不是当前身体的 60%。
你在聊天中忽略了我，所以我会在这里重新发布 - 你没有解决我描述的问题。

【解决方案2】：

据我所知，您必须将其包装在占剩余宽度 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%;
}

【讨论】：

我如何获得 100% 的剩余宽度？如果我应用 width:100% 它将是屏幕宽度的 100%。
刚刚更新了一种方法，使用表格显示样式

【解决方案3】：

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

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

【讨论】：