inline-block元素是否可以自动填充可用宽度？ [英] Is it possible for inline-block element to auto fill the available width?

问题描述

我有一个< div id =content> 其中包含< div id =sub-navigation> 和< div id =main container> ，它们是内联块，我想能够使 main container 填充剩余的可用页宽。这是否可能？

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

我需要 columns-strip 如果 columns-strip 的宽度超过了列，则扩展或收缩主容器，则应出现一个水平滚动条。

I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.

CSS：

* {
  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;
}

HTML：

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

推荐答案

inline-block 样式并浮动＃sub-navigation div。 inline-block 不适合您尝试实现的。当您不添加显示样式时， div 元素将是默认值 block ， block 元素默认占用所有可用空间。通过浮动＃sub-navigation 元素，您只需占用其内容所需的空间。

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

#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

这篇关于inline-block元素是否可以自动填充可用宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！