如何让内部左侧div占据100％减去“右侧固定宽度div” [英] how to make inner left div take up 100% minus "right side fixed width div"

问题描述

  
 
我想要正确的div有一个固定的宽度和左边的div来占用盒子里的所有东西。 < div id ='outer'style ='width：100％'> 
< div id ='inner1'>< / div> 
< div id ='inner2'>< / div> 
< / div> 
  

解决方案

执行此操作可能有更好的方法，但这可能会实现你想要实现的目标：

  #outer {
 background-color：red; 
} 
 
 .clear {
 clear：both; 
} 
 
＃inner1 {
 background-color：red; 
 margin-right：200px; 
 float：left; 
} 
 
＃inner2 {
 float：right; 
 width：200px; 
 margin-left：-200px; 
 background-color：blue; 
 
 $ / code> 

结合



 < div id ='outer'style ='width：100％'> 
< div id ='inner1'> Foo< / div> 
< div id ='inner2'>栏< / div> 
< div class ='clear'>< / div> 
< / div> 
  

所以，尽管这实际上并没有使左边的那个占据剩余的空间，它不会侵犯正确的列。

相关联的jsFiddle：

• http://www.jsfiddle.net/r7MgY/1105/

I want the right div to have a fixed width and the left div to take up everything else inside the box.

<div id='outer' style='width:100%'>
 <div id='inner1'></div>
 <div id='inner2'></div>
</div>

解决方案

There may be a better way of doing this, but this may achieve what you're trying to accomplish:

#outer {
  background-color: red;
}

.clear {
  clear:both;
}

#inner1 {
  background-color: red;
  margin-right:200px;
  float:left;
}

#inner2 {
  float: right;
  width: 200px;
  margin-left: -200px;
  background-color: blue;
}

Combined with

<div id='outer' style='width:100%'>
 <div id='inner1'>Foo</div>
 <div id='inner2'>Bar</div>
 <div class='clear'></div>
</div>

So, while this doesn't actually make the one on the left take up the rest of the space, it won't encroach upon the right column.

Associated jsFiddle:

• http://www.jsfiddle.net/r7MgY/1105/

这篇关于如何让内部左侧div占据100％减去“右侧固定宽度div”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！