我有2个div:一个在左边,一个在右边。左边的宽度是固定的,我想用右边的填充剩余的空间。

#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; } #{导航 宽度:780 px; 浮:左; background - color: # A53030; } < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航


当前回答

.container { 宽度:100%; 显示:表; vertical-align:中间; } .left { 宽度:100%; 显示:表格单元; text-align:中心; } 铃声{ 宽度:40像素; 高度:40像素; 显示:表格单元; 浮:正确; } < div class = "容器" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div

试试这个。这对我很管用。

其他回答

这似乎达到了你想要的效果。

#{离开 浮:左; 宽度:180 px; background - color: # ff0000; } #{正确 宽度:100%; background - color: # 00 ff00; } < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >

/* * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/* * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

解决方案来自display属性。

基本上你需要让两个div像表格单元一样。所以不是使用float:left,你必须在两个div上使用display:table-cell,对于动态宽度div,你需要设置width:auto;也。这两个div都应该放在一个100%宽度的容器中,并使用display:table属性。

下面是css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

而HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

重要提示:对于Internet Explorer,您需要在动态宽度div上指定float属性,否则空间将不会被填充。

我希望这能解决你的问题。 如果你愿意,你可以在我的博客上阅读关于这一点的完整文章。

我在Boushley的答案中发现的问题是,如果右列比左列长,它就会围绕着左列并继续填充整个空间。这不是我想要的行为。在搜索了许多“解决方案”后,我找到了一个教程(现在链接死了),如何创建三列页面。

作者提供了三种不同的方法,一种是固定宽度,一种是三个可变列,一种是固定外列,中间可变宽。比我发现的其他例子更加优雅和有效。显著提高了我对CSS布局的理解。

基本上,在上面的简单例子中,将第一列向左浮动,并给它一个固定的宽度。然后给右边的一列留出比第一列稍宽的左距。就是这样。完成了。Ala Boushley的代码:

下面是Stack Snippets & jsFiddle中的一个演示

#{离开 浮:左; 宽度:180 px; } #{正确 margin-left: 180 px; } /*只是为了突出div,例如*/ #left {background-color:粉色;} #right {background-color:浅绿色;} <div id="left"> left </div> . <div id="right"> right </div> .

在鲍什利的例子中,左边一列表示右边另一列。只要左列结束,右列就开始再次填充整个空间。在这里,右列只是进一步对齐到页面中,而左列占据了它的大空白。不需要流交互。

如果您试图填充flexbox中2项之间的剩余空间,请将以下类添加到您想要分离的2项之间的空div:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}