如何让div填充剩余的水平空间？ [英] How to make a div fill a remaining horizontal space?

问题描述

我有2个div：一个在我的页面的左侧和一个在右侧。在左边的一个有固定的宽度，我希望右边的一个填充剩余的空间。

右侧是导航，我希望它能填充右侧的剩余空间：

  #search {
宽度：160px; 
 height：25px; 
 float：left; 
 background-color：#ffffff; 
} 
 #navigation {
 width：780px; 
 float：left; 
 / * background-color：url（'../ images / transparent.png'）; * / 
 background-color：＃A53030; 
 
  

  < div id =search> Text 
< / div> 
<？php include（navigation.html）; ？> 
< div id =left-column> 
< / div> 
  

解决方案

这似乎完成了你要做的事情。

$ b

  #left {float：left;宽度：180像素; background-color：＃ff0000;}＃right {width：100％; < div>的背景颜色：＃00FF00;}  

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

The one on the right side is the navigation and I want it to to fill the remaining space on it right side:

#search {
    width: 160px;
    height: 25px;
    float: left;
    background-color: #ffffff;
}
#navigation {
    width: 780px;
    float: left; 
    /*background-color: url('../images/transparent.png') ;*/
    background-color: #A53030;
}

<div id="search">Text
</div>
<?php include("navigation.html"); ?>
<div id="left-column">
</div>

解决方案

This seems to accomplish what you're going for.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

这篇关于如何让div填充剩余的水平空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！