Question

我在这里看到了一个解决方案... how to float two divs beside one div? ...但是如果你将div顺序改为B，C，A（见http://jsfiddle.net/4Jpts/3/）它会中断。

我的设置：

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

标题和导航应该在另一个之下浮动，部分应该向左浮动。

另外，我不想在HTML5标签周围包含额外的div。

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

谢谢，

史蒂夫

Answer 1

为什么不重新排列导航，部分，标题（使用当前的CSS）

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

但如果你只是想用这种安排检查我的小提琴http://jsfiddle.net/4Jpts/9/

我基本上做的是从divA删除左浮动并清除divC右侧的内容

Answer 2

您可能会选择输入＆lt; br＆gt;标签。但是将你的第三个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>

我已经使用了很多选择，但是在容器中包装是值得信赖的，不会在任何浏览器或更新版本的浏览器中发布。

Answer 3

我希望我能找到你想要达到的正确形象。 http://jsfiddle.net/4Jpts/10/

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

您需要使用clear。

#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;
}

剩下一个div浮动，两个div在HTML5中浮动

3 个答案: