div不会以保证金为中心:0 auto;

Question

div不会以保证金为中心:0 auto;

我的问题只是以div为中心.

目前,我只有一个简单的html文件.我不知道为什么margin: 0 auto不工作.

这是我的html的布局:

<style type="text/css">

#header {
    width: 100%;
    margin: 0 auto 20px auto;
    height: 50px;
    background-color: #0F6;

}
#navigation {
    width: auto;
    float: right;
        margin: 0 auto;
    display: inline-block;
}
#content {
    background-color: #936;
    margin: 0 auto;
    width: 960px;
    position: relative;
    min-width: 720px;
    max-width: 960px;
}
footer {
    background-color:#0F6;
    width: 100%;
    height: 200px;
}
body {
    background-image: url(images/dark_wall.png);
}

</style>
</head>
    <body>
<div id="header">
  <div id="navigation">This is the nav</div>
</div>

<div id="content">
<div id="content_top">
</div>
<div id="content_middle">
</div>
<div id="content_bottom">
</div>
</div>



<footer>
<div id="footer_div_1"><p>DIV #1</p>
</div>
<div id="footer_div_2"><p>DIV #2</p>
</div>
<div id="footer_div_3"><p>DIV #3</p>
</div>
</footer>



</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer").css("position","fixed").css("bottom",0);
  }
});
</script>

<!– Add conditional for IE7 + 8 support –>   
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

Run Code Online (Sandbox Code Playgroud)

底部的jquery只是为了让我的页脚成为一个粘性的页脚,因为这是我学会使用的最简单的方法,可以解决最少的问题.

这是我的外部css文件的内容

@charset "utf-8";
/* CSS Document */

body {
  min-width: 960px;
  background:url(../img/dark_wall.png);
}

html, body {
    margin: 0;
    border: 0;
    width: 100%;
    font-size: 100%;
    font-family: Impact, "Courier New";
}

#footer_div_1 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

#footer_div_2 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

#footer_div_3 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

sal*_*din 11

将div的div设置宽度居中,并将margin-left和marign-right设置为auto.

不要在该div中使用float属性,也不要使用display:inline; 并显示:inline-block; 在那个div

div id ="content"之间没有任何内容,因此div无需显示任何内容.只需添加一些内容或设置div id ="content"的高度.

哇.... T__T我迟钝了......谢谢你的帮助.它完美地解决了我的问题.我会记住这一点,以备将来参考.我刚刚开始准备结构,我没有意识到添加内容会激活我的CSS的某些部分.再次,谢谢.=]我真的很感激. (2认同)

归档时间：	11 年，9 月前
查看次数：	19898 次
最近记录：	8 年，8 月前