css - 如何在 HTML 中使用 float 正确定位它们？

Question

我正在尝试使用这段 CSS 代码制作三种类型的 block :

div#menu {
width:200px;
height:400px;
border:2px ridge white;
text-align:center;
float:left;
margin:4px;
}
div#container {
width:850px;
height:850px;
overflow:auto;
margin:auto;
text-align:center;
border:2px ridge green;
}
div#maincontent {
width:608px;
height:700px;
border:2px ridge white;
text-align:center;
float:right;
top:10px;
margin:4px;
}
div#subcontent {
width:200px;
height:100px;
border:2px ridge white;
text-align:center;
float:left;
margin:4px;
clear:both;
}

容器将容纳整个元素/页面。

在容器内，菜单位于左上角，子内容框位于菜单正下方(左下角)。主内容框位于右上角，就在菜单/子内容框的右侧。

我在 HTML 中是这样安排的:

<div id="container">
<div id="menu"></div>
<div id="subcontent"></div>
<div id="maincontent"></div>
</div>

但是，当我运行它时，它会使主内容框的顶部与子内容框的顶部对齐，而不是与菜单对齐。

如何让它 float 到右上角，而不是恰好在右边？

Answer 1

http://jsfiddle.net/7zvSu/

使您的 mainContent float:left(删除 top 属性)。并将您的主要内容 div 放在菜单后面。

CSS:

div#menu {
    width:200px;
    height:400px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
}
div#container {
    width:850px;
    height:850px;
    overflow:auto;
    margin:auto;
    text-align:center;
    border:2px ridge green;
}
div#maincontent {
    width:608px;
    height:700px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
}
div#subcontent {
    width:200px;
    height:100px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
    clear:both;
}

html

<div id="container">
  <div id="menu"></div>
  <div id="maincontent"></div>
  <div id="subcontent"></div>
</div>