以空餘空間表示浮動元素旁邊的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寬度

回答

相關問題