CSS浮动离开不正常

Question

我正在尝试将两个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>

我制作了宽度为760px的主div，因此在设置这些设置时，我仍然可以使用10px。现在的问题是，我不能将float-right分配给具有右类的div，并且只能将float-left分配给具有左类的div。我尝试上下改变div，重新分配位置，但我得到的并不是我想要的。有什么帮助吗？

修改

CSS
.right {
font-family: verdana;
font-size: 12px;
border-radius: 3px;
}

.left {
font-family: verdana;
font-size: 10px;
color: #000000;
border-radius: 3px;
}

这是我得到的结果，我不想要

我想要的是什么

Answer 1

DIV是一个块元素，因此您可以float或inline-block向right div提供实际width这样的内容：

.right{float:right}

编辑：

回答你的评论

如果您将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>

Answer 2

你需要摆脱一些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>

这应该有效。

Answer 3

如果你正确进行宽度测量，你可以通过实际浮动所有内容来获得该布局。您的div订单必须正确堆叠，它自然会浮动到您想要的位置。你有更多的div不必要。一定要清理它。