我不知道为什么这个CSS不起作用

Question

fiftydot编辑：（没有文档类型）

这是pastebin中的代码： http : //pastebin.com/zwPTd8dd

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Layout</title>
<style type="text/css">
    #wholepage{
    background: #fff;
    width: 960px;
    margin: 0 auto;
    }

    #header{
    width: 960px;
    margin: auto 0;
    }
   #header ul{
    border:1px solid #bbbbbb;
    width:100%;
    height:45px;
    -moz-border-radius:8px;
    -webkit-border-radius: 4px;
    list-style: none;
    }
    #header ul li{
    float: left;
    margin: 3px;
    }


    #login-form{
    position: relative;
    margin-left: 750px;
    margin-right: -20px;
    border: 1px solid #4e4e4e;
    }

    #frontpage-content{
    position: relative;
    margin-right: 210px;
    border: 1px solid #bbbbbb;

    }


</style>
</head>

<body>
<div id="wholepage">
    <div id="header">
        <ul>
            <li>Home</li>
            <li>Profile</li>

            <li>username
            <input type="text"/>
            </li>
            <li>password
            <input type="password" />
            </li>
            <li><input type="submit" value="login"/>
        </ul>
    </div>

    <div id="login-form">
    widget 1 : description of widget one here ... 
    </div>
    <div id="login-form">
    widget 2 : description of widget two here...
    </div>

    <div id="frontpage-content">
     content here<br/>
     content here<br/>
    </div>

    <p>Terms of use | Contact | About | Developers | Advertising | Services | Partners</p>

</div>
</body>
</html>

它推低了“首页内容” div。 我已经尝试解决了很长时间。 我没有其他想法了。 :(

这个问题解决了。 谢谢你们的帮助。

Answer 1

我假设从您如何设置要让首页内容位于登录表单小部件右侧的边距来判断？

如果是这样，您就缺少了“ float ”的CSS值。 我会将您所有的侧边栏内容放入id为“ left-sidebar”的div中，并使其

#left-sidebar {
  width: 200px;
  float: left;
}

#frontpage-content{
  position: relative;
  width: 750px;
  float: right;
  border: 1px solid #bbbbbb;
}

#login-form{
  position: relative;
  width: 100%;
  border: 1px solid #4e4e4e;
}

在＃frontpage-content之后的源代码中，放置：

<div style="clear:both;"></div>

在您的页脚内容之前。

Answer 2

固定： http : //jsfiddle.net/Mutant_Tractor/xNAaz/2/

确定要添加position:fixed; bottom:0; 上课

Answer 3

我认为这就是您要寻找的... http://jsfiddle.net/ZsjDL/2/

浮动可能很棘手。 确保在浮动元素上定义宽度，并且ID在标记中不应存在多次。

我不知道为什么这个CSS不起作用

问题描述

3 个解决方案

解决方案1
1 已采纳 2011-02-23 18:11:11

解决方案2
0 2011-02-23 18:16:33

解决方案3
0 2011-02-23 19:23:30

我不知道为什么这个CSS不起作用

问题描述

3 个解决方案

解决方案1 1 已采纳 2011-02-23 18:11:11

解决方案2 0 2011-02-23 18:16:33

解决方案3 0 2011-02-23 19:23:30

解决方案1
1 已采纳 2011-02-23 18:11:11

解决方案2
0 2011-02-23 18:16:33

解决方案3
0 2011-02-23 19:23:30