这让我发疯了。
我试图在屏幕的80％之间对齐3个div ...但它没有发生。
我得到标题和导航div为100％，然后我的滑块和页脚div为80％，但中间有3个div（我用作高度的列：auto; ...但是我不能让它发挥作用。
看看我的代码。
另外令人讨厌的部分是它在Dreamweaver中看起来不错，但是第二个我在浏览器中加载它看起来很糟糕。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test Site</title>
</head>
<body>
<header>
<div class="header">
<h1>Sydney CBD FC</h1>
</div>
<div class="navbar"></div>
</header>
<div class="container">
<div class="homeslider"></div>
<div class="homebox">
<p>I've done a lot of searching and I've found outdated tutorials that don't work...
I have a site made with PHP and when I submit a particular form in my admin area, I want to publish to my Facebook "fan page"
There is no RSS available, so do you have any example to directly post to the Facebook fan page (not user wall) using php sdk?
Thank you!</p>
</div>
<div class="homebox2">
<p>I've done a lot of searching and I've found outdated tutorials that don't work...
I have a site made with PHP and when I submit a particular form in my admin area, I want to publish to my Facebook "fan page"
There is no RSS available, so do you have any example to directly post to the Facebook fan page (not user wall) using php sdk?
Thank you!</p>
</div>
<div class="homebox3">
<p>
I've done a lot of searching and I've found outdated tutorials that don't work...
I have a site made with PHP and when I submit a particular form in my admin area, I want to publish to my Facebook "fan page"
There is no RSS available, so do you have any example to directly post to the Facebook fan page (not user wall) using php sdk?
Thank you!
</p>
</div>
<footer>
</footer>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
header {
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.container {
width: 80%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.header {
background-color: #7B0A0B;
width: 100%;
height: 120px;
padding-left:20px;
padding-top: 25px;
padding-bottom:auto;
}
.navbar {
background-color: #E4383B;
width: 100%;
height: 50px;
}
.homeslider {
width: 80%;
height: 300px;
background-color: #7C7C7C;
margin-left: auto;
margin-right: auto;
}
.homebox {
background-color: #898989;
height: auto;
width: 30%;
float: left;
margin-top: 15px;
padding: 8px;
margin-bottom: 15px;
}
.homebox2 {
background-color: #898989;
height: auto;
width: 30%;
float: left;
margin-top: 15px;
padding: 8px;
margin-left: 3%;
margin-bottom: 15px;
}
.homebox3 {
background-color: #898989;
height: auto;
width: 30%;
float: right;
margin-top: 15px;
margin-bottom: 15px;
padding: 8px;
}
footer {
width: 80%;
height: 200px;
background-color: #898989;
clear: both;
margin: auto;
}
答案 0 :(得分：1)
在你的代码中有一些css问题。
实施大小调整read more
/* CSS Document */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
header {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.container {
width: 80%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.header {
background-color: #7B0A0B;
width: 100%;
height: 120px;
padding-left: 20px;
padding-top: 25px;
padding-bottom: auto;
}
.navbar {
background-color: #E4383B;
width: 100%;
height: 50px;
}
.homeslider {
width: 80%;
height: 300px;
background-color: #7C7C7C;
margin-left: auto;
margin-right: auto;
}
footer {
width: 80%;
height: 200px;
background-color: #898989;
clear: both;
margin: auto;
}
.three-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 20px auto 0;
width: 80%;
}
.three-box * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.three-box .three-box-row {
margin: 0 -15px;
}
.three-box .three-box-row:after {
clear: both;
display: block;
content: '';
}
.three-box .homebox {
width: 33.3333%;
float: left;
padding: 0 15px;
margin-bottom: 15px;
}
.three-box .box {
background-color: #898989;
padding: 10px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test Site</title>
</head>
<body>
<header>
<div class="header">
<h1>Sydney CBD FC</h1>
</div>
<div class="navbar"></div>
</header>
<div class="container">
<div class="homeslider"></div>
<div class="three-box">
<div class="three-box-row">
<div class="homebox">
<div class="box">
<p>I've done a lot of searching and I've found outdated tutorials that don't work... I have a site made with PHP and when I submit a particular form in my admin area, I want to publish to my Facebook "fan page" There is no RSS available, so do
you have any example to directly post to the Facebook fan page (not user wall) using php sdk? Thank you!</p>
</div>
</div>
<div class="homebox">
<div class="box">
<p>I've done a lot of searching and I've found outdated tutorials that don't work... I have a site made with PHP and when I submit a particular form in my admin area, I want to publish to my Facebook "fan page" There is no RSS available, so do
you have any example to directly post to the Facebook fan page (not user wall) using php sdk? Thank you!</p>
</div>
</div>
<div class="homebox">
<div class="box">
<p>I've done a lot of searching and I've found outdated tutorials that don't work... I have a site made with PHP and when I submit a particular form in my admin area, I want to publish to my Facebook "fan page" There is no RSS available, so do
you have any example to directly post to the Facebook fan page (not user wall) using php sdk? Thank you!</p>
</div>
</div>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
我希望它对你有所帮助..