为什么浮动会把事情弄得高于div？

时间：2013-02-18 23:56:21

标签： html css

我有完美的工作代码，这不符合我的要求...但是有效。

我想集中而不是浮动

以下是工作代码：

我的.css：

* {
 margin: 0;
 padding: 0;
}
body { background: #ededed url(../images/bg.gif) repeat-x; }
p {
 color: #999;
 padding: 0;
 margin: 10px 0;
 font: 12px/18px Arial, Helvetica, sans-serif;
}
#container {
 margin: auto;
 width: 950px;
}
#header {
 height: 302px;c
 width: 950px;
 float: left;
 background: url(../images/header.gif) no-repeat;
}
#logo { margin-top: 60px; }
#logo h1 {
 display: block;
 float: left;
 width: 503px;
 height: 57px;
 text-indent: -9999px;
}
#logo h1 a {
 display: block;
 width: 100%;
 height: 100%;
 outline: none;
 background: url(../images/logo.png) no-repeat 0 0;
}
#navigation {
 height: 38px;
 width: 950px;
 margin-top: 152px;
 float: left;
}
.nav-links li {
 display: inline;
 padding: 3px 25px 0 0;
 float: left;
}
.nav-links li a {
 text-transform: capitalize;
 color: #fff;
 text-decoration: none;
 letter-spacing: -1px;
 font: bold 14px Arial, Helvetica, sans-serif;
}
.nav-links li a:hover { color: #ff0; }
.phone-number li {
 float: right;
 list-style-type: none;
 text-transform: capitalize;
 color: #fff;
 letter-spacing: -1px;
 padding-top: 3px;
 font: normal 14px Arial, Helvetica, sans-serif;
}
h2 {
 text-transform: capitalize;
 color: #666;
 letter-spacing: -1px;
 padding-top: 7px;
 font: bold 16px Arial, Helvetica, sans-serif;
}
.content-middle p { text-align: justify; }
#content-center {
 float: right;
 width: 322px;
 margin-top: 20px;
}
.login-top {
 float: left;
 height: 32px;
 width: 292px;
 background: url(../images/sidebar_top.png) no-repeat;
 padding: 4px 15px;
}
.login-middle {
 float: left;
 width: 290px;
 padding: 5px 15px 0 15px;
 border-right: 1px solid #d3d3d3;
 border-left: 1px solid #d3d3d3;
 background: #fff;
}
.login-middle p { text-align: justify; }
.login-bottom {
 float: left;
 height: 16px;
 width: 322px;
 margin-bottom: 15px;
 background: url(../images/sidebar_bottom.png) no-repeat;
}
#footer {
 clear: both;
 height: 111px;
 background: url(../images/footer.gif) repeat-x bottom;
}
#footer-content {
 height: 91px;
 width: 950px;
 padding-top: 20px;
 margin: auto;
}
#footer-content p {
 color: #fff;
 text-align: center;
 padding-top: 35px;
}

.divbuttons{text-align: center;
}

.login{width:25%;}

.button {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
    background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
    background-color:#89c403;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;
    border:1px solid #74b807;
    display:inline-block;
    color:#ffffff;
    font-family:Verdana;
    font-size:14px;
    font-weight:bold;
    padding:6px 30px;
    text-decoration:none;
    text-shadow:0px 1px 0px #528009;
}.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
    background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
    background-color:#77a809;
}.button:active {
    position:relative;
    top:1px;}

我的Html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<title>Pachonk - Home</title>
<base href="http://alex.piechowski.org/school/"></base>
<link href="css/admin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/layouts/inline.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container">
  <div id="header">
    <div id="logo">
      <h1><a href="home">Pachonk - Your Assignments, anywhere!</a></h1>
    </div>
    <div id="navigation">
      <ul class="nav-links">
        <li><a href="home">home</a></li>
        <li><a href="#">our schools</a></li>
        <li><a href="#">applications</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="contact">contact us</a></li>
      </ul>
      <ul class="phone-number">
        <li>free quotation - 0800 123 456</li>
      </ul>
    </div>
  </div>
  <div id="content-center">
  <div class="login-top">
  <h2>Administrator Login:</h2>
  </div>
    <div class="login-middle">
        <p>> Email confirmation upon register theming</p>
        <p>> Dynamic nav bar</p>
        <p>> Contact me form active</p>
        <p>> Make logout.php a json response</p>
        <p>> Error checking both server side and client side registration</p>
        <p>> Log in using email OR username</p>
        <p>> login box display more detials</p>
        <p>> Password reset</p>
        <p>> include files to memory save</p>
        <p>> inline noty's on login/register.</p>
        <p>> clean code</p>
        <p>> admin side</p>
        <p>> library for logcheck/admin check</p>
    </div>
    <div class="login-bottom">
    </div>
  </div>
  </div>
 <div id="footer">
  <div id="footer-content">
<p>&copy; Copyright
2013
 Pachonk</p> 
  </div>
</div>
</body>
</html>

然后我试着通过去做div：＃/ p> 

#content-center {
 margin-left: auto ;
 margin-right: auto ;
 width: 322px;
 margin-top: 20px;
}

但是它会使它高于它。

2 个答案:

答案 0 :(得分：6)

添加：

#content_center {
    margin-left: auto ;
    margin-right: auto ;
    width: 322px;
    margin-top: 20px;
    clear: both;
}

左侧或右侧不允许浮动元素（由于clear: both）。

答案 1 :(得分：0)

您需要删除：

margin-top: 20px;
来自＃content-center的

因为这会推动该div中的所有内容。

编辑：上面的答案告诉你添加

clear:both;

这也有效，我想我误解了你的问题，为什么你首先需要保证金。仍然完全失去了为什么你首先需要保证金顶部，如果有人不介意解释，它真的很烦我？ :)

相关问题
最新问题