如何让内部左侧div占据100%减去“右侧固定宽度div” [英] how to make inner left div take up 100% minus "right side fixed width div"
本文介绍了如何让内部左侧div占据100%减去“右侧固定宽度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:
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:
这篇关于如何让内部左侧div占据100%减去“右侧固定宽度div”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文