Ausrichten zweier Divs nebeneinander

Question

Ausrichten zweier Divs nebeneinander

Gefragt el 26 de April, 2010: Wann wurde die Frage gestellt
235159 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe ein kleines Problem. Ich versuche, zwei Divs nebeneinander mit CSS auszurichten, jedoch möchte ich, dass das mittlere Div horizontal in der Mitte der Seite positioniert wird, ich erreichte dies durch die Verwendung:

#page-wrap { margin 0 auto; }

Das hat gut funktioniert. Das zweite div möchte ich auf der linken Seite der zentralen Seite wrap positioniert, aber ich kann nicht verwalten, dies mit Floats zu tun, obwohl ich sicher bin, dass es möglich ist.

Ich möchte das rote Div neben dem weißen Div nach oben schieben.

Hier ist mein aktuelles CSS für diese beiden Divs, wobei sidebar das rote Div und page-wrap das weiße Div ist:

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}

Gefragt el 26 de April, 2010 von Ronnie

0 Stimmen

Dies wurde als Duplikat geschlossen, obwohl das "Original" aus dem Jahr 2011 stammt?

Kommentiert el 22 de August, 2020 von Nicht registrierter Benutzer

Answer 1

5 Antworten

Answer 2

83voto

Nick Craver Punkte 609016

Wenn Sie Ihre Divs umhüllen, etwa so:

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

Sie könnten dieses Styling verwenden:

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

Das ist allerdings ein etwas anderes Aussehen, daher bin ich mir nicht sicher, ob es das ist, was Sie suchen. Dies würde alles zentrieren 800px als eine Einheit, nicht die 600px zentriert mit dem 200px auf der linken Seite. Der grundlegende Ansatz ist, dass die Seitenleiste links schwebt, aber innerhalb des Haupt-Divs, und die #page-wrap hat die Breite Ihrer Seitenleiste als linken Rand, um sich so weit nach vorne zu bewegen.

Aktualisierung aufgrund von Kommentaren: Für diesen exzentrischen Look können Sie dies tun:

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

Mit diesem Styling:

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}

Beantwortet el 26 de April, 2010 von Nick Craver (609016 Punkte )

Answer 3

20voto

Mr. Alien Punkte 146806

Ich verstehe nicht, warum Nick die margin-left: 200px; anstatt das andere zu treiben div zum left o right Ich habe nur sein Markup optimiert, Sie können Folgendes verwenden float für beide Elemente zu verwenden, anstatt margin-left .

Demo

#main {
    margin: auto;
    width: 400px;
}

#sidebar    {
    width: 100px;
    min-height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 300px;
    background: #0f0;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

Außerdem habe ich .clear:after die ich auf dem übergeordneten Element aufrufe, nur um das übergeordnete Element selbst zu löschen.

Beantwortet el 30 de August, 2013 von Mr. Alien (146806 Punkte )

Answer 4

12voto

Mark Macneil Bikeio Punkte 2893

Dies kann durch Stileigenschaften geschehen.

<!DOCTYPE html>
<html>
<head>
<style> 
#main {

  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

</body>
</html>

Sein Ergebnis wird sein:

enter image description here

Viel Spaß... Bitte beachten Sie: Dies funktioniert in höheren Version von CSS (>3.0).

Beantwortet el 18 de Marsch, 2014 von Mark Macneil Bikeio (2893 Punkte )

Answer 5

4voto

Dr Amit Sehgal Punkte 51

Der HTML-Code ist für drei nebeneinander liegende divs gedacht und kann mit einigen Änderungen auch für zwei verwendet werden

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

Das CSS wird sein

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

Dieser Code wird auf ein responsives Layout hinarbeiten, da er die Größe der

<div>

je nach Gerätebreite. Selbst schweigen kann jeder

<div>

als

<!--<div id="third">third</div> -->

und kann Rest zwei für zwei verwenden

<div>

Seite an Seite.

Beantwortet el 17 de Dezember, 2016 von Dr Amit Sehgal (51 Punkte )

Answer 6

2voto

matharden Punkte 705

Es ist auch möglich, dies ohne den Wrapper zu tun - div#main. Sie können den #page-wrap mit der margin: 0 auto; Methode zentrieren und dann die left:- n Methode zur Positionierung der #sidebar und Hinzufügen der Breite von #page-wrap.

body { background: black; }
#sidebar    {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -230px;
    }

#page-wrap  {
    width: 60px;
    background: #fff;
    height: 400px;
    margin: 0 auto;
    }

Die Seitenleiste würde jedoch über das Browserfenster hinaus verschwinden, wenn das Fenster kleiner als der Inhalt ist.

Die zweite Antwort von Nick ist jedoch die beste, da sie auch wartungsfreundlicher ist, da man die #sidebar nicht anpassen muss, wenn man die Größe von #page-wrap ändern möchte.

Beantwortet el 26 de April, 2010 von matharden (705 Punkte )

Ausrichten zweier Divs nebeneinander

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Ausrichten zweier Divs nebeneinander

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: