Question

我正在努力解决CSS问题。我有一个简单的首页，由4个div组成。其中3个是可见的。另一个是叠加层。

<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="overlay" visible="false"></div>
<div id="container">Container</div>
<div id="menu">
 <input type="text" />
 <input type="button" class="button" value="Go" onclick="ajax.getData()" />        
</div>  
</form>

我希望“菜单”位于标题的左侧。我已经能够通过将此div的位置设置为绝对来实现此目的：

 #menu
{
    position: absolute;
    top: 20px;
    left: 10px;
    width: 150px;
    height: 300px;
    padding: 5px;
    border: solid 1px #666;
    background: #ffffff;
    -moz-border-radius: 5px;
}

但是，当屏幕调整大小（较小）时，此div保持锁定位置，但其他div调整大小（所需）但菜单div不会。将定位更改为“相对”会导致div落在“容器”div下方。有人能告诉我我的CSS有什么问题吗？

IE和FF中的结果相同。

谢谢！

-Nick

Answer 1

使用float：left;在菜单上然后使用clear清除“float”：both;之后。

<div id="menu" style="float: left;">
 <input type="text" />
 <input type="button" class="button" value="Go" onclick="ajax.getData()" />        
</div>  
<div id="header" style="float: right;">Header</div>
<div style="clear: both;" />
<div id="overlay"></div>
<div id="container">Container</div>

Answer 2

至少有三种方法可以解决这个问题。

方法1： - 更改div顺序

<div id="header">
<div id="menu">   ---- Menu here
<div id="overlay">
<div id="container">

...浮动 - 左侧标题和菜单，两者都是相对的。在这些之间具有非浮动块元素否则会影响相对浮动，并且div不一定排列。

方法2： - 浮动一切

<div id="header">
<div id="overlay">
<div id="container">
<div id="menu">

...所有东西都浮动，位置相对。但是，您需要确保标题+覆盖+容器的宽度不会太大，无法将菜单推送到下一行。

方法3：绝对定位和调整大小

将内容添加到表单CSS中，因为它们是position: relative。这样，表单中的绝对定位div将把表单解释为它的父元素并在其中重新调整大小。但是，您的菜单div无法根据当前的表单宽度重新调整大小，因为它具有固定的像素尺寸。这些需要是重新调整大小的百分比。

希望有所帮助。

如何将div放在页面的左上角？

2 个答案: