个人中心
gpt4 book ai didi

html - 为什么 float 会把 div 上面的东西弄乱？

转载 作者：太空宇宙 更新时间：2023-11-04 14:41:40 26 4
gpt4 key购买 nike

我有完美的工作代码，它不能按照我想要的方式工作......但是可以工作。

我想居中而不是 float

这是工作代码:

我的.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 成为中心:

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

但是它弄乱了上面的 div。

最佳答案

添加这个:

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

左侧或右侧都不允许有 float 元素(由于 clear: both)。

关于html - 为什么 float 会把 div 上面的东西弄乱？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14947514/

26 4 0
文章推荐： jquery - 为什么我有双滚动条和非 Canvas 菜单？
文章推荐： c++ - 如何排序 vector>
文章推荐： html - 如何调整工具栏中元素之间的间距？
文章推荐： java - 提取指定单词之后的所有单词直到句子结尾
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com