1. 首頁
  2. 問答
  3. 對齊3 div的CSS

對齊3 div的CSS

2017-01-07 77 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所以它的麪糊爲另一個。 –

相關問題

 相關問題