center richten Sie drei divs nebeneinander mit CSS
Ich habe drei div
s nebeneinander in einen container, der stellt sich auf die Breite der Benutzer-Fenster.
Ich will, dass Sie bleiben verschachtelte nebeneinander und zentriert, wie eine Einheit in den dynamischen container.
Ich würde dies gerne tun ohne setzen Sie in einem anderen div
(vor allem, weil ich habe eine Menge von Ihnen in dieser Seite, wie Sie ist).
HTML:
<div id="content">
<div id="nav_one">
<h3>COLLECTIONS</h3>
<p style="text-align:justify">blahblah</p>
</div>
<div id="nav_three">
<h3>COLLECTIONS</h3>
<p style="text-align:justify">blahblah</p>
</div>
<div id="nav_two">
<h3>COLLECTIONS</h3>
<p style="text-align:justify">blahblah</p>
</div>
</div>
CSS:
#nav_one {
width: 208px;
float: left;
padding: 20px 10px 20px 10px;
text-align: center;
}
#nav_two {
width: 208px;
margin: 0 auto;
padding: 20px 10px 20px 10px;
text-align: center;
}
#nav_three {
width: 208px;
float: right;
padding: 20px 10px;
text-align: center;
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ok, nach dem Kommentar unten, ich habe eine bessere Idee, was Sie suchen, mit dem VORBEHALT der div-container ist, erfordern 208px. Ich glaube nicht, dass margin: auto wird hier zum Zentrum, alle drei in einer Gruppe, so dass ich vorschlagen, mit float: left und jQuery verwenden, um zu berechnen, #content div, subtrahieren .container-breiten, und teilen Sie durch zwei und linken Rand für die Links-die meisten .div-container.
BEARBEITEN
Zu berücksichtigen, die mit fester Breite 208px div-Container, ich denke, der einfachste Weg, dies zu tun wäre, um ein bisschen jQuery:
Hier ein jsfiddle, um die Wirkung zeigen (aktualisiert mit den oben genannten).
Natürlich, an diesem Punkt, Sie könnte sehr gut sein, besser mit einem div-container mit margin-auto angewendet ist, und eine Breite von 3 div-contianer Sie haben mit es. Natürlich, dieser Ansatz führt zu Problemen im IE aufgrund eines Fehlers in der Art margin: auto behandelt wird.
Zeigt beide.
Wenn ich das richtig verstehe, Sie versuchen, um die Mitte der 3 divs der Klasse container im div-id Inhalt. Breite der div-container bestimmt den Abstand von Ihrem 3 verschachteln von divs, wenn Sie wollen, dass Sie näher zusammen stellen Sie einfach die Breite der div-container. Wenn Ihr div-container passiert zu sein, eine Feste Breite Polsterung verwenden, um push-Inhalte, um in.
verwenden:
Seine generell eine schlechte Idee, verwenden Sie eine Feste Breite Messungen in der css. Legen Sie Ihre Breite Messungen mit einem Prozentsatz und dann beschränken Sie die Verwendung von px-Messungen mit min-width und max-width. Dadurch können die Portierbarkeit auf verschiedenen Bildschirm-Größen.
Im Grunde, was Sie tun, ist Mikro-Management. Durch die Verwendung von Prozentsätzen anstatt Sie zulassen, dass der browser zum Rendern der Inhalte leichter.
calc()
übernommen werden.Den letzten Kommentar von @gollum18, so ist hier eine bessere Antwort als alle der oben genannten.
HTML
CSS