css - zentriert - Ausrichten von zwei divs Seite an Seite




html button positionieren (4)

Ich habe ein kleines Problem. Ich versuche, zwei divs Seite an Seite mit CSS auszurichten, aber ich würde gerne die Mitte div horizontal in der Mitte der Seite positioniert werden, erreichte ich dies mit:

#page-wrap { margin 0 auto; }

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

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

Hier ist mein derzeitiges CSS bezüglich dieser beiden Divs, Sidebar ist das rote Div und Seitenumbruch ist das weiße Div:

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

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

https://code.i-harness.com


Der HTML-Code ist für drei div Seite an Seite ausgerichtet und kann für zwei auch durch einige Änderungen 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 sich auf das responsive Layout auswirken, da er die Größe des

<div> 

entsprechend Gerätebreite. Selbst einer kann niemanden schweigen

<div>

wie

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

und kann Pause zwei für zwei nutzen

<div> 

Seite an Seite.


Die einfachste Methode wäre, sie beide in ein container div und den margin: 0 auto; anzuwenden margin: 0 auto; zum Behälter. Dadurch werden sowohl die #page-wrap als auch die #page-wrap #sidebar auf der Seite #sidebar . Wenn Sie jedoch dieses #sidebar Aussehen wünschen, können Sie den container 200px nach links verschieben, um die Breite des #sidebar div zu berücksichtigen.


Es ist auch möglich, dies ohne den Wrapper zu tun - div # main. Sie können den # Seitenumbruch mit dem Rand zentrieren: 0 auto; Methode und dann verwenden Sie die linke: - n ; Methode zum Positionieren der # Seitenleiste und Hinzufügen der Breite von # Seitenumbruch.

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 außerhalb des Browser-Ansichtsfensters verschwinden, wenn das Fenster kleiner als der Inhalt war.

Nicks zweite Antwort ist jedoch am besten, weil sie auch wartungsfreundlicher ist, da Sie #sidesbar nicht anpassen müssen, wenn Sie die Größe von # seitenumbruch ändern möchten.


Ich verstehe nicht, warum Nick margin-left: 200px; Anstatt das andere div nach left oder right schweben, habe ich nur sein Markup geändert, du kannst float für beide Elemente verwenden, anstatt margin-left benutzen.

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 ich das .clear:after habe, um das .clear:after selbst zu löschen.





css-float