1. 首页
  2. 问答
  3. 对齐3 div的CSS

对齐3 div的CSS

2017-01-07 51 views
0

这让我疯狂。对齐3 div的CSS

我想对齐3个div的80％的屏幕之间......但它没有发生。

我得到的标题和导航div的100％，然后我的滑块和页脚div的80％，但3 div的介于两者之间（即我用作列高度：自动; ...但我无法得到它的工作。

看看我的代码。

而且烦人的部分是，它看起来在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; 
}

来源

2017-01-07 Chris

+0

并不完全知道你在找完成的任务。你可以制作一个模型，以便我们可以看到你想要做什么？ – happymacarts

+0

3个均匀排列的列。 – Chris

+1

它对我来说很好http://codepen.io/anon/pen/apOLeM –

回答

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>

我希望它有助于你..

来源

2017-01-07 04:08:46

+0

你改变了哪条线（我不想读它或差异） ？ – happymacarts

+0

完美。谢谢。这已经解决了这个问题。我需要仔细阅读代码，以便我知道下一次要做什么。 – Chris

+0

谢谢，如果它为你工作，然后检查为upvote所以它的面糊为另一个。 –

相关问题

 相关问题