CSS CSS浮动左不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7876981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS float left not working right
提问by Crays
i'm trying to split two divs into two section, left and right. With the left one being static (300px height) and right one is not static (such as posts and comments). With a footer at the bottom.
我试图将两个 div 分成左右两部分。左边一个是静态的（300px 高度），右边一个不是静态的（例如帖子和评论）。底部有一个页脚。
<div>
<div>
<div class="right"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div>
</div>
<div>
<div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div>
</div>
I made my main div with a width of 760px, hence with those setting, i still have 10px to spare. The problem now is, i cannot assign float-right to the div with right class, and can only assign float-left to the div with left class. I tried changing the div up and down, reassigning the positions, but what i get isn't what i want. Any help?
我的主 div 宽度为 760 像素，因此使用这些设置，我仍然有 10 像素的余量。现在的问题是，我无法将 float-right 分配给具有右类的 div，而只能将 float-left 分配给具有左类的 div。我尝试上下更改 div，重新分配位置，但我得到的不是我想要的。有什么帮助吗？
edit
编辑
CSS
.right {
font-family: verdana;
font-size: 12px;
border-radius: 3px;
}
.left {
font-family: verdana;
font-size: 10px;
color: #000000;
border-radius: 3px;
}
This is the results i get which i don't want
这是我不想要的结果
what i want is
我想要的是
回答by sandeep
DIVis a block element so you can give floator inline-blockto your right divto take its actual widthlike this:
DIV是块元素，所以你可以给float或者inline-block你right div采取实际width是这样的：
.right{float:right}
EDIT:
编辑：
answer your comment below
在下面回答您的评论
if you give floatto the divsthen you have to clear its parentlike this :
如果你给float了divs那么你必须clear its parent喜欢这个：
<div style="overflow:hidden">
<div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div>
<div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div>
</div>
回答by Emir Akayd?n
you need to get rid of some divs or assign floating to parent divs of right, left divs.
您需要摆脱一些 div 或将浮动分配给右、左 div 的父 div。
<div>
<div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div>
<div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div>
<div class="footer" style="clear: both;"><img src="images/members/ava/crays.jpg" style="width:760px; height:80px;" /></div>
</div>
this should work.
这应该有效。
回答by creativeedg10
If you do the width measurements right, you can get that layout by actually floating everything to the left. Your div order has to stack right, and it will naturally float to where you want it. You have more divs than necessary. Be sure to clean this up.
如果您正确进行宽度测量，则可以通过将所有内容实际向左浮动来获得该布局。您的 div 顺序必须正确堆叠，它自然会浮动到您想要的位置。你有超过必要的 div。一定要把它清理干净。
