Question

thirtydot编辑:(没有doctype）

以下是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>

它正在推动“frontpage-content”div。我一直试图解决这个问题很长一段时间。我没有更多的想法。：（

此问题已解决。谢谢大家的帮助。

Answer 1

我假设你是如何设置边缘设置的，你希望frontpage-content在登录窗体小部件的右边？

如果是这样，您就错过了“float”的CSS值。我将所有侧边栏内容放在一个div中，其ID为“left-sidebar”并将其设为

#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 个答案: