css float with width percentage [英] css float with width percentage
问题描述
#inner
{
height:700px;
}
div.content
{
float:left;
width:95%;
}
div.content span.first
{
display:block;
float:left;
width:25%;
overflow:hidden;
}
div.content span.second
{
clear:both;
display:block;
float:right;
width:25%;
}
div.content span.third
{
clear:both;
display:block;
float:right;
width:25%;
}
</style>
<body>
<div id="outer">
<div id="inner">
<div class="content">
<span class="first">
HELLO
</span>
</div>
<div class="content">
<span class="second">
pRERNA
</span>
</div>
<div class="content">
<span class="third">
gOLANI
</span>
</div>
当使用像素工作时，
When working with pixels is working but not with percentage why?I want to create three columns of equal width.If outer element is 72%.I want to create cloumns of 72/3 ie 24% width.
推荐答案
您需要为父级设置宽度。无论是100％还是像素宽度，否则引擎不知道从中导出％。
You need to set a width to the parent. Whether that's 100% or a pixel width otherwise the engine doesn't know what to derive the % from.
也应该解释你的代码是做什么和你想要什么它会做得更好，以便更多的人可以帮助，你不下降票：）
also you should explain what your code is doing and what you want it to do better so that more people can help and you don't get down votes :)
编辑
也考虑到你在这里展示的可能是最后的孩子走出了INNER父母。我会添加一个clearfix到你的样式表只是google clearfix，你应该是好去。基本上，它添加一个伪元素到父的结尾，清除那个元素，这给了一个上下文，让你的孩子玩得很好。
also considering what you're showing here you probably are ending up with children going outside of the INNER parent. I would add a clearfix to your stylesheets just google clearfix and you should be good to go. Basically it adds a pseudo element to the end of the parent, clears that element, which gives a context so your children play nicely.
这篇关于css float with width percentage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
