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列：使用可用的宽度

回答

相关问题