如何在 HTML 中使用 float 正确定位这些？答案

【问题标题】：How do I position these correctly using float in HTML?如何在 HTML 中使用 float 正确定位这些？
【发布时间】：2012-06-01 00:27:23
【问题描述】：

我正在尝试使用此 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: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>

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

如何让它浮动到右上角，而不是正好？

【问题讨论】：

看看这个问题。它将为您提供一个关于如何轻松为多种场景布局 div stackoverflow.com/questions/2731496/… 或这个 stackoverflow.com/questions/3344825/… 的总体思路

标签： css html css-float

【解决方案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>

【讨论】：

【解决方案2】：

试试这个，如果你想右浮动块，总是把它放在左浮动块之前

所以如果你想浮动

<div id="maincontent"></div>

向右浮动，在浮动左侧 div 之前先浮动

以下 div 的顺序应该可以工作

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

【讨论】：