1

我在这里看到了部分解决方案......如何在一个 div 旁边浮动两个 div？...但是如果您将 div 顺序更改为 B、C、A （请参阅http://jsfiddle.net/4Jpts/3/），它会中断。

我的设置：

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

Header 和 Nav 应该在彼此下方浮动，Section 应该向左浮动。

另外，我不希望在 HTML5 标记周围包裹额外的 div。

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

谢谢，

史蒂夫

4

3 回答 3

2

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

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

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

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

于 2013-09-29T13:07:45.433 回答
0

您可能有一些选择，例如输入 <br> 标签。但是将您的第三个 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>

我已经使用了很多选择，但是包装在容器中是您可以相信不会在任何浏览器或尚未发布的较新版本的浏览器中变形的东西。

于 2013-09-29T13:00:31.483 回答
0

我希望我对你想要达到的目标有正确的印象。http://jsfiddle.net/4Jpts/10/

<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;
}
于 2013-09-29T13:18:05.317 回答