Question

任何人都知道这样做的方法，当省略菜单div时，主div使用所有可用的宽度？

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



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

Answer 1

在main上使用100％宽度。 E.g。

<强> 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评论。

Answer 2

<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>

注意：

好的，所以有一件事你需要担心的是，如果你在这些div周围放置任何边框，那么你将不得不将宽度减少一点以考虑边框的宽度。

实际确保正确外观的一个好方法是将这些视为容器类，并将实际内容div放在其中。

.main：after {}是为了使.main浮动正确，以防你在另一个div中包含它，然后你有下面的内容。：在那里注入一个块之后，确保你不必记住在下面的块元素的样式中放入“clear：both”（可能你想要在这个集合下面）

希望这有帮助。

Answer 3

未经测试，因为我正在通过手机输入内容：

<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>

css列：使用可用宽度

3 个答案: