如何在下一个潜水器上放置两个潜水器

你所要做的就是将两个div都向左浮动,并应用所需的样式来实现图像中的样式(我刚刚做了类似的事情,唯一匹配的就是颜色)。如果你将一个浮动到每一侧,你将无法控制这些窗口的分离,如果窗口大小改变,除非它们在一个容器内,这就是为什么我喜欢浮动到同一侧并选择一个边距。这只是个人偏好,并不意味着任何其他方式都更好。

<style>
.floatOne{
     float:left;
     margin-right:10px;
     background-color:#ff6464;
     height:300px;
     width:80px;
     }

.floatTwo{
     float:left;
     margin-right:10px;
     background-color:#6485ff;
     height:300px;
     width:200px;
     }
</style>

<div class='floatOne'>Some text</div>
<div class='floatTwo'>Some text</div>

以下是我的代码的输出:

floating divs http://img532.imageshack.us/img532/4254/stackh.jpg

浮动区1左,浮动区2右:

<div id="1" style="float:left;"></div>
<div id="2" style="float:right;"></div>