浮动div和100％宽度 [英] floating divs and 100% width
问题描述
你如何让这两个div都有100％的宽度？ （1）：
< div style =" float：left;背景：黑色;颜色：白色>>你好，世界！
< / div>
< div style =" clear：both;背景：蓝色;颜色：白色>>你好，世界！
< / div>
您可以将浮动div内的宽度设置为100％，但如果你做
，如果你有一个浮动的固定宽度div，100％宽度div
将出现在一个新行上，如图所示（2）：
< div style =" float：left;宽度：50px;身高：50px;背景：
blue">< / div>
< div style =" float：left;宽度：100％;身高：50px;背景：
black">< / div>
在这种情况下，您可以使用嵌套div并让外部div具有
a黑色背景，而内部div有蓝色背景，但是，
有时候你真的想要使用花车。这是一个
使用嵌套div'（3）的例子：
< div style =" background：black;身高：50px">
< div style =" background：blue;身高：50px;宽度：50px; float：
left">< / div>
< / div>
所以任何想法如何实现在（2）中的效果，同时，使用花车
？
这是一个包含所有演示的页面：
http://www.frostjedi .com / terra / scrip ... oat-width.html
How do you get both of these div''s to have a 100% width? (1):
<div style="float: left; background: black; color: white">Hello, world!
</div>
<div style="clear: both; background: blue; color: white">Hello, world!
</div>
You could set the width inside the floated div to 100% but if you do
that and if you have a floated fixed width div, the 100% width div
will appear on a new line, as demonstrated (2):
<div style="float: left; width: 50px; height: 50px; background:
blue"></div>
<div style="float: left; width: 100%; height: 50px; background:
black"></div>
You could, in this case, use a nested div and have the outer div have
a black background while the inner div has a blue background, however,
sometimes you really are going to want to use floats. Here''s an
example of using nested div''s (3):
<div style="background: black; height: 50px">
<div style="background: blue; height: 50px; width: 50px; float:
left"></div>
</div>
So any idea how to achieve the effect in (2) while, at the same time,
using floats?
Here''s a page that includes all the demonstrates:
http://www.frostjedi.com/terra/scrip...oat-width.html
推荐答案
yawnmoth写道：
yawnmoth wrote:
>
http://www.frostjedi.com/terra/scrip...oat-width.html
没有理由同时浮动div。
假设你想要2个div一起占据视口的100％
宽度，不要浮动第二个div它会拿走任何水平的
空间。
< br $> b $ b -
Berg
There is no reason to float both divs.
Assuming you want the 2 divs together to take up 100% of the viewport
width, don''t float the second div and it will take whatever horizontal
space is left.
--
Berg
" Bergamot" < be ****** @ visi.comwrote in message
news：5p ************ @ mid.individual.net ...
"Bergamot" <be******@visi.comwrote in message
news:5p************@mid.individual.net...
yawnmoth写道：
yawnmoth wrote:
>>
http://www.frostjedi.com/terra/scrip...oat-width.html
没有理由将两个div都浮动。
假设你想要2个div一起占用100％ viewport
宽度，不要浮动第二个div，它将占用剩下的任何水平
空间。
There is no reason to float both divs.
Assuming you want the 2 divs together to take up 100% of the viewport
width, don''t float the second div and it will take whatever horizontal
space is left.
不，不会。不过这是*内容*。
-
Richard。
No it wont. It''s *content* will though.
--
Richard.
In article
< 11 ********************** @ d55g2000hsg.googlegroups .com> ;,
yawnmoth< te ******* @ yahoo.comwrote：
In article
<11**********************@d55g2000hsg.googlegroups .com>,
yawnmoth <te*******@yahoo.comwrote:
你如何让这两个div都有100％的宽度？ （1）：
< div style =" float：left;背景：黑色;颜色：白色>>你好，世界！
< / div>
< div style =" clear：both;背景：蓝色;颜色：白色>>你好，世界！
< / div>
How do you get both of these div''s to have a 100% width? (1):
<div style="float: left; background: black; color: white">Hello, world!
</div>
<div style="clear: both; background: blue; color: white">Hello, world!
</div>
删除最后一个div上的clear，看看你是什么得到。
Remove the clear on the last div and see what you get.
你可以在里面设置宽度...
这是一个包含所有演示的页面：
http：//www.frostjedi。 com / terra / scrip ... oat-width.html
-
dorayme
--
dorayme
这篇关于浮动div和100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
