Question

我正在尝试使用这个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;
}

容器将保存整个项目/页面。

在容器内，菜单将位于左上角，子内容框将位于菜单下方（左下角）。 maincontent框位于菜单/子内容框右侧的右上角。

我在HTML中安排了类似的内容：

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

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

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

Answer 1

http://jsfiddle.net/7zvSu/

制作主要内容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>

Answer 2

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

所以如果你想漂浮

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

向右，在浮动离开divs之前先浮动它

以下div的顺序应该有效

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

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

2 个答案: