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

我有一个<div id="content">其中包含<div id="sub-navigation>和<div id="main container">，这是行内块。我希望能够使main container填充剩余的可用页面宽度。那可能吗？内嵌块元素是否可以自动填充可用宽度？

Palge Layout

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

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>

来源

2012-04-19 Boris

不带'inline-block'且没有JavaScript，没有。 – Phrogz 2012-04-19 00:46:59

所以，我必须浮动'sub-navigation'和'main-container'？ – Boris 2012-04-19 00:50:26

顺便说一下，您可能希望重新考虑为'font-size'使用'points'。 – steveax 2012-04-19 00:52:50

您必须删除inline-block样式并浮动#sub-navigation格。 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; 
}

确保#main-container

来源

2012-04-19 00:51:43

唯一的问题是，如果主要内容没有定义为div，它将是100％，这意味着它将被插入到子导航下。 – Lazerblade 2012-04-19 01:12:20

@Lazerblade：你定义为div的意思是什么？如果div的内容不允许在它旁边显示，那么'div'将只显示在＃子导航下面（例如，如果你指定宽度，插入大图像或可笑的url） – 2012-04-19 01:32:02

产生一个小提琴在哪里主容器位于subnavigation div旁边，没有为主容器指定宽度，但是主容器在没有使用javacript的情况下填充未被子导航占用的包装宽度。 – Lazerblade 2012-04-19 01:35:40

那不是如何inline-block s的应该被使用。这里做的最好的事情是让你的导航盒float:left，并保留默认值display值。

来源

2012-04-19 00:51:27

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

来源

2012-04-19 00:55:12 Lazerblade

同意。我希望页眉和页脚扩展到浏览器框架（减去边距），子导航是固定宽度，内容是子导航的右侧和红色div的右侧之间留下的任何内容。该死，我需要一个浮点数！ – Boris 2012-04-19 00:59:26

曾听说过柔性盒模型 !!

它就是为了这个。

注意在flexbox模型中，所有子元素都充当弹性框模型，您不能选择某些特定的东西。这意味着如果页面有导航，并在它下面的内容div +边div。您无法使顶部导航无法使用。这有什么影响。所以解决方案是让所有的东西只需要在一个div中弹出框。

来源

2013-08-29 01:08:22

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

回答

相关问题