我不知道為什么這個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