css列：使用可用的寬度

任何人都知道一種方式，以便當菜單div被省略時，主div使用所有可用的寬度？css列：使用可用的寬度

+-------------- container -------------+ 
    | +--- menu ---+ +---- main ------+ | 
    | |   | |    | | 
    | |   | |    | | 
    | +------------+ +----------------+ | 
    +--------------------------------------+ 



    +-------------- container -------------+ 
    | +------------- main -------------+ | 
    | |        | | 
    | |        | | 
    | +--------------------------------+ | 
    +--------------------------------------+

來源

2010-07-17 breez

我知道沒有辦法做到這一點，除了使用'表'。有興趣看看是否有任何事情發生。 – 2010-07-17 13:00:16

使用100％的寬度。例如。

CSS

<style type="text/css"> 
    #container { 
    width: 300px; /* Fixed container width */ 
    height: 400px; /* Height, just as an example */ 
    border: 1px solid red; /* Just to show the border of the container DIV */ 
    } 

    #menu { 
    width: 100px; /* Fixed menu width */ 
    height: 100%; /* Fill the height of the container */ 
    float: left; /* Float to the left, so the main can take the space to the right */ 
    border: 1px solid green; /* Just to show the border of the menu DIV */ 
    } 

    #main { 
    width: 100%; /* Fill the remaining width */ 
    height: 100%; /* Fill the height of the container */ 
    border: 1px solid blue; /* Just to show the border of the main DIV */ 
    } 
</style>

HTML

<div id="container"> 
    <div id="menu">Menu</div> 
    <div id="main">Main</div> 
</div>

例with menu。

示例with hidden menu。

編輯：只需修復CSS註釋。

來源

2010-07-17 13:25:02

這是有效的，這也是我從一開始就嘗試過的，把它搞砸的東西就是這個

，我在主div裏。猜猜我應該相信我的直覺更多.. – breez 2010-07-17 15:54:35

@breez - 有時你在正確的軌道上，但只是讓它工作。去過也做過。 :)'

'應該可以正常使用上面的代碼。 – 2010-07-17 16:07:58

是啊，我只是有一些明確的：兩個和100％的寬度，這並沒有很好地與佈局 – breez 2010-07-17 16:15:33

<style type='text/css'> 

.menu { 
     float: left; 
     min-width: 20%; /* fix this to your happiness */ 
} 

.main:after { 
     content: "."; /* foo */ 
     display: block; 
     visibility: hidden; 
     clear: both; 
} 

.main { 
     width: 100%; 
} 

.menu + .main { 
     float: left; /* you can also make this right (play with it a bit) */ 
     width: 80%; /* work this out with happiness above !(see notes below) */ 
} 

.menu[display=hidden] + .main { 
     width: 100%; 
} 
</style> 

<div class='container'> 
<div class='menu'> 
    Menu Content 
</div> 
<div class='main'> 
    Main content 
</div> 
</div>

注：

OK，所以你不必擔心一件事就是以下，如果你把身邊這些div任何邊界，那麼你將有一個位，以減少寬度佔爲邊界的寬度。

實際確保正確外觀的好方法是將這些視爲容器類，並將實際內容div放入其中。

.main：在{}之後，將正確地設置.main浮點數，以防您將其包含在另一個div中，然後您的內容在下面。：在注入了一個塊後，確保你不必記住在後面的塊元素的樣式中設置「clear：both」（假設你想要在這個集合下面）

希望這有助於。

來源

2010-07-17 13:16:13

這也可以，甚至更好。我的意思是不刪除菜單只是'擠'出來。我不好意思把'佈局'畫錯了。好答案。 – breez 2010-07-17 15:58:02

實際寬度：自動將工作相當不錯。主。 – 2010-07-17 16:10:38

未經檢驗的，因爲我從我的手機上輸入此：在main

<div id="container"> 
<div id="menu" style="float:left;width:100px;margin:0 auto;height:100%"></div> 
<div id="main" style="float:right;width:auto;margin:0 auto;height:100%"></div> 
</div>

來源

2010-07-17 13:17:41

css列：使用可用的寬度

回答

相關問題