以空余空间表示浮动元素旁边的div宽度

在此jsfiddle中，我想将div的宽度表示为剩余屏幕空间的百分比，而不是总屏幕宽度。但是，随着前三个层级结构的浮动，目前还没有发生。以空余空间表示浮动元素旁边的div宽度

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

2012-11-16 user1561108

据我所知，你将不得不把它包装在一个父元素中，占据了剩余宽度的100％，这样你就可以做出四分之一的比例。

为了让父元素占据剩余的空间，那么它并不漂亮，但是最好的办法可能是求助于表格显示样式。 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%; 
}

来源

2012-11-16 08:58:20 acjay

我怎么虽然剩余宽度的100％？如果我应用宽度：100％，它将是屏幕宽度的100％。 – user1561108

刚刚更新的方式来做到这一点，使用表格显示样式 – acjay

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

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

来源

2012-11-16 09:02:17 Kudos

刚从.four这个类中删除宽度它将自动掩盖的剩余空间。并给予margin-left总three div's的价值比fourth div将经过三个div的

CSS开始

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

DEMO

来源

2012-11-16 09:02:18

这不允许我在剩余空间方面定义.four - 应用百分比宽度仍然是整个屏幕，除非我失踪什么？ – user1561108

你错过了一些东西，因为我已经根据你的要求做了演示检查你的代码在哪里你做错了什么或者告诉我们你在哪里应用这个东西... –

你错过了什么 - 特别是 - *我想表达.four div的宽度占剩余屏幕空间的百分比，而不是整个屏幕宽度。*您的解决方案不允许我根据剩余的屏幕空间来表示div的宽度。 – user1561108

以空余空间表示浮动元素旁边的div宽度

回答

相关问题