如何製作寬度：自動使用浮動工作？

我注意到有幾個關於這種類型的問題的一些問題，只有2個div在一個包裝內，沒有任何浮動，但我無法找到任何與浮動和幾個div。如何製作寬度：自動使用浮動工作？

所以這裏是guestion：我如何使容器div自動填充其餘的寬度？我需要保持浮動和任何顯示：內聯塊等解決方案不解決這個問題。

請隨意的代碼複製到記事本，所以你可以實時看到：

<html> 
<head> 
<style> 
#wrapper 
{ 
    width: 100%; 
    height: 100%; 
    border: 1px black solid; 
} 

.block1 { 
     width: auto; 
     float:left; 
     min-height: 500px; 
     display: inline-block; 
     background-color: green; 
} 
.block2 { 
     display: inline-block; 
     float:left; 
     min-height: 500px; 
     width: 200px; 
     background-color: red; 
    } 
.block3 { 
     display: inline-block; 
     float:left; 
     height: 30px; 
     width: 10%; 
     background-color: yellow; 
    } 
.block4 { 
     display: inline-block; 
     float:left; 
     height: 30px; 
     width: 90%; 
     background-color: purple; 
    } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="block4">topmenu</div> 
    <div class="block3">profilebar</div> 
    <div class="block2">leftmenu</div> 
    <div class="block1">content</div> 
</div> 

</body> 
</html>

Here is a JSFiddle example

來源

2013-07-18 Defain

從.block1取出float和display並設置margin-left和margin-top像這樣：

.block1 { 
    width: auto; 
    min-height: 500px; 
    margin-top:30px; 
    margin-left:200px; 
    background-color: green; 
}

Here is a working example

來源

2013-07-18 13:48:39 musefan

效果很好。謝謝！ – Defain

比花車更好的解決方案是使用絕對和相對位置，就像這樣：

<div id="header"> 
    <div id="topmenu">topmenu</div> 
    <div id="profilebar">profilebar</div> 
</div> 
<div id="content-container"> 
    <div id="leftmenu">leftmenu</div> 
    <div id="content">content</div> 
</div>

#header { 
    position: relative; 
    height: 30px; 
} 

#topmenu { 
    position: absolute; 
    width: 90%; 
    height: 100%; 
    background-color: purple; 
} 

#profilebar { 
    position: absolute; 
    left: 90%; 
    right: 0; 
    height: 100%; 
    background-color: yellow; 
} 

#content-container { 
    position: relative; 
} 

#leftmenu { 
    position: absolute; 
    width: 200px; 
    min-height: 500px; 
    background-color: red; 
} 

#content { 
    position: absolute; 
    left: 200px; 
    right: 0; 
    min-height: 500px; 
    background-color: green; 
}

Here's an example on jsFiddle.

來源

2013-07-18 13:53:34 Nesk

如何製作寬度：自動使用浮動工作？

回答

相關問題