Css 在HTML5中，一个div向左浮动，两个div向右浮动

我在这里看到了部分解决方案。。。但是如果你把div顺序改为B，C，A（参见），它就会中断

我的设置：

<div id="page">
  <header></header>
  <nav></nav>
  <section></section>
</div>

收割台和导航应在彼此的正下方浮动，区段应在左侧浮动

另外，我不希望在HTML5标签周围再加上div

目前我正试图自己解决这个问题，但不知道是否有人有任何建议

谢谢

---

Steve

您可能有一些选择，如输入标签。但是，将第三个div包装到另一个div中是您能做的最好的事情，并且可以在所有浏览器中正常工作

#mainContainer{ overflow:hidden; }
#divA{ float:left; width:60%; background:red; height:500px; }
#divB{ float:right; width:35%; background:yellow; height:200px; margin-bottom:20px}
#divC{ float:right; width:35%; background:blue; height:100px }


<div id="mainContainer">
    <div id="divB"></div>
    <div id="divC"></div>
    <div>
    <div id="divA"></div>
   </div>
</div>

#主容器{溢出：隐藏；}
#divA{float:左；宽度：60%；背景：红色；高度：500px；}
#divB{float:右侧；宽度：35%；背景：黄色；高度：200px；边距底部：20px}
#divC{float:右；宽度：35%；背景：蓝色；高度：100px}

---

我使用了很多选择，但包装在容器中是一种你可以信赖的东西，在任何浏览器或尚未发布的浏览器的更新版本中都不会变形。

为什么不重新排列导航、分区和标题，使其类似（使用当前的css）

但如果你只是想在这种安排下得到它 检查我的小提琴

---

我所做的基本工作是从divA中删除左边的浮点数，并清除divC右边的浮点数

我希望我得到了您想要实现的正确图像

---

你不能把这个部分作为第一个子部分来编辑你的标记吗？很好用。我已经这样做了，虽然浮动部分左，所以我得到了一个空间，在页面顶部，如果是清除标题，但不是导航。。。谢谢你。s

<div id="mainContainer">
    <div id="divA"></div>
    <div id="divB"></div>
    <div id="divC"></div>
</div>

<div id="mainContainer">
 <div id="divA"></div>
 <div id="divB"></div>
 <div id="divC"></div>
</div>

#mainContainer { 
overflow:hidden;
}

#divA { 
float:right; 
width:60%; 
background:red; 
height:500px; 
}

#divB {
float:right; 
width:35%; 
background:yellow; 
height:200px; 
margin-bottom:20px;
clear:right;
}

#divC { 
float:left; 
width:35%; 
background:blue; 
height:100px; 
clear:both;
}