对齐3 div的CSS

克里斯

这真让我抓狂。

我正在尝试在屏幕的80%之间对齐3格...但是这没有发生。

我将标题和导航div的值设为100%,然后将滑块和页脚的div的值设为80%,但将3 div放在两者之间(我将其用作具有height: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;
}
香港先生

在您的代码中有一些CSS问题。

实现盒子大小阅读更多

/* 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>

希望对您有帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章