Html 内联块元素是否可以自动填充可用宽度？

Is it possible for inline-block element to auto fill the available width?

提问by Boris

I have a <div id="content">, which contains <div id="sub-navigation>and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main containerfill the rest of the available page width. Is that possible?

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

I need columns-stripto expand or shrink based on the number and width of columnelements. If the width of the columns-stripexceeds the width of the main container, then a horizontal scroll bar should appear.

我需要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>

采纳答案by Benjamin Udink ten Cate

You have to remove the inline-blockstyles and float the #sub-navigationdiv. inline-blockis not suited for what you are trying to achieve. When you add no display styles, the divelement will be the default value which is block, blockelements take up all the available space by default. By floating the #sub-navigationelement you make it only take up the space required for its contents.

您必须删除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;
}

make sure to add a clear: leftelement after the #main-container

确保在之后添加一个clear: left元素#main-container

回答by Niet the Dark Absol

That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:leftand leave the default displayvalue alone.

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

回答by Lazerblade

If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...

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

回答by Muhammad Umer

Ever heard of flex box model!!

听说过弹性盒模型！

It is made just for that.

它就是为此而生的。

Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.

注意在 flexbox 模型中，所有子元素都作为 flex box 模型，你不能选择退出某些东西。这意味着如果页面有导航，并且在它下面有内容 div + 侧边 div。你不能用它做顶部导航。这有影响。所以解决方案是将所有需要弹性框的东西都放在一个 div 中。