Ausrichten 3 divs CSS

Das macht mich verrückt.Ausrichten 3 divs CSS

Ich versuche 3 divs zwischen 80% des Bildschirms auszurichten ... aber es passiert nicht.

Ich bekomme die Header und Nav Divs bei 100%, dann meine Slider und Footer div bei 80%, aber die 3 Divs dazwischen (das war ich als Spalten mit Höhe verwenden: Auto; ... aber ich kann sie nicht arbeiten.

an meinem Code Werfen sie einen Blick.

auch das lästige Teil ist es in Dreamweaver sieht ok, aber die zweite ich es in den Browser laden sie es schrecklich aussieht.

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; 
}

Quelle

2017-01-07 Chris

nicht ganz sicher, was Sie suchen zu erreichen. Können Sie ein Modell erstellen, damit wir sehen können, was Sie zu tun versuchen? – happymacarts

3 gleichmäßig ausgerichtete Spalten. – Chris

Es sieht gut aus für mich http://codepen.io/anon/pen/apOLeM –

In Ihrem Code einige CSS-Ausgabe.

Implementierung Box-Sizing 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>

Ich hoffe, seine für Sie hilfreich ..

Quelle

2017-01-07 04:08:46

welche Zeilen haben Sie geändert (ich möchte nicht alles lesen oder vergleichen) ? – happymacarts

Perfekt. Vielen Dank. Das hat das Problem gelöst. Ich muss über den Code gehen, damit ich weiß, was ich für das nächste Mal mache. – Chris

Vielen Dank, wenn es für dich funktioniert, dann überprüfe, ob es der andere ist. –

Ausrichten 3 divs CSS

Antwort

Verwandte Themen