13

我有一个<div id="content">, 其中包含<div id="sub-navigation>和<div id="main container">，它们本身就是内联块。我希望能够main container填充可用页面宽度的其余部分。那可能吗？

页面布局

我需要columns-strip根据column元素的数量和宽度来扩大或缩小。如果 的宽度columns-strip超过 的宽度，main container则应出现水平滚动条。

* {
      margin: 0px;
      padding: 0px;
      font-size: 10pt;
      white-space: normal; 
    }

    #wrapper {
      margin: 0px 20px; 
      background-color: red;
    }

    #header {
      margin: 25px 10px 10px 10px;
      height: 50px; 
      background-color: purple;
      color: white;
    }

    #content {
      margin: 10px; 
      padding: 10px; 
      font-size: 0pt; 
      white-space: nowrap; 
      overflow: hidden; 
      background-color: white;
    }

    #sub-navigation {
      width: 200px; 
      height: 150px; 
      display: inline-block; 
      vertical-align: top; 
      background-color: forestgreen; 
      color: white;
    }

    #main-container {
      padding: 10px; 
      display: inline-block; 
      overflow: auto; 
      background-color: yellow;
    }

    #columns-strip {
      padding: 10px; 
      font-size: 0pt; 
      white-space: nowrap; 
      background-color: mediumturquoise;
    }

    .posts-column {
      margin: 0px; 
      width: 200px; 
      height: 200px; 
      display: inline-block; 
      vertical-align: top; 
      overflow: auto;
    }

    #footer {
      margin: 10px 10px 25px 10px; 
      height: 50px; 
      background-color: navy;
    }
<div id="wrapper">
  <div id="header"></div>  
  <div id="content">    
    <div id="sub-navigation"></div>    
    <div id="main-container">
      <div id="columns-strip">    
        <div class="posts-column" style="background-color: lightgray;"></div>
        <div class="posts-column" style="background-color: darkgray;"></div>
        <div class="posts-column" style="background-color: gray;"></div>
      </div>
    </div>
  </div>
  <div id="footer"></div>
</div>

4

4 回答 4

9

您必须删除inline-block样式并浮动#sub-navigationdiv。inline-block不适合您想要实现的目标。当您不添加任何显示样式时，该div元素将是默认值，即block，block元素默认占用所有可用空间。通过浮动#sub-navigation元素，您可以使其仅占用其内容所需的空间。

#sub-navigation {
  width: 200px; 
  height: 150px; 
  float : left;
  vertical-align: top; 
  background-color: forestgreen; 
  color: white;
}

#main-container {
  padding: 10px;        
  overflow: auto; 
  background-color: yellow;
}

确保clear: left在#main-container

于 2012-04-19T00:51:43.257 回答
1

这不是inline-blocks 应该如何使用的。最好的办法是制作您的导航框float:left并保留默认display值。

于 2012-04-19T00:51:27.817 回答
0

如果您的页眉、页脚和包装器具有特定的宽度，那么是的，您可以让您的主容器填充可用空间。但是，如果您没有在 CSS 中指定宽度，那么您需要根据包含元素（包装器）的呈现宽度来确定您的主容器可以有多大。在页面加载后确定宽度的唯一方法是使用 javascript。如果您希望您的网站具有动态宽度但仍然让您的内容（子导航和主容器）填满屏幕，您将需要使用 javascript 或百分比，当您开始查看不同的分辨率时，百分比会变得很难看显示器、笔记本电脑等...

于 2012-04-19T00:55:12.523 回答
0

听说过柔性盒模型！

它就是为此而生的。

请注意，在 flexbox 模型中，所有子元素都充当 flex 盒模型，您不能选择退出某些东西。这意味着如果页面有导航并且在它下面有内容 div + side div。您无法从中进行顶部导航。这有影响。所以解决方案是在一个 div 中只包含所有需要弹性框的东西。

于 2013-08-29T01:08:22.553 回答