Teilen Sie Div mithilfe von CSS in zwei Spalten auf

89

Ich habe versucht, ein Div mithilfe von CSS in zwei Spalten aufzuteilen, aber ich habe es noch nicht geschafft, es zum Laufen zu bringen. Meine Grundstruktur ist wie folgt:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

Wenn ich versuche, die rechten und linken Divs an ihre jeweiligen Positionen (rechts und links) zu verschieben, scheint dies die Hintergrundfarbe des Inhaltsdivs zu ignorieren. Und anderer Code, den ich von verschiedenen Websites ausprobiert habe, scheint nicht in meine Struktur zu übersetzen.

Vielen Dank für jede Hilfe!

PF1
quelle
2
Es gibt so viele Lösungen, dass Sie dies sehen können: stackoverflow.com/questions/211383/…
enmaai

Antworten:

60

Wenn Sie diese beiden Divs schweben lassen, wird das Content-Div auf die Höhe Null reduziert. Einfach hinzufügen

<br style="clear:both;"/>

nach dem #right div aber innerhalb des Inhalts div. Dadurch wird das Inhalts-Div gezwungen, die beiden internen, schwebenden Divs zu umgeben.

Rob Van Dam
quelle
16
Es ist bedauerlich, dass dies so oft positiv bewertet wurde. Sie sollten unnötige Aufschläge wirklich vermeiden, insbesondere wenn Sie bedenken, dass es andere praktikable, weit verbreitete Mittel gibt.
Jbird
88

Das funktioniert gut für mich. Ich habe den Bildschirm in zwei Hälften geteilt: 20% und 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>
Navish
quelle
3
Wenn dies alles ist, was Sie tun, hat das übergeordnete Element dieser Elemente keine Höhe.
Tybro0103
Einfach und effektiv. Danke dir!
Alexis Gamarra
47

Eine andere Möglichkeit, dies zu tun, besteht darin overflow:hidden;, dem übergeordneten Element der schwebenden Elemente etwas hinzuzufügen .

Überlauf: Durch Ausblenden wächst das Element, um in schwebende Elemente zu passen.

Auf diese Weise kann alles in CSS erfolgen, anstatt ein weiteres HTML-Element hinzuzufügen.

tybro0103
quelle
1
Ich möchte die Leser ermutigen, auch meine andere Antwort zu lesen. Ich denke, es ist tatsächlich besser als dieses.
Tybro0103
1
Noch eine Anmerkung: overflow:auto;kann manchmal eine bessere Option sein
tybro0103
Dies ist definitiv ein wirksames Mittel. Es ist jedoch erwähnenswert, dass dies einige offensichtliche Layout-Herausforderungen verursachen kann. Zum Beispiel, wenn der Überlauf meines übergeordneten Elements sichtbar sein soll.
Jbird
16

Der flexibelste Weg, dies zu tun:

#content::after {
  display:block;
  content:"";
  clear:both;
}

Dies entspricht genau dem Anhängen des Elements an #content:

<br style="clear:both;"/>

aber ohne tatsächlich ein Element hinzuzufügen. :: after heißt Pseudoelement. Der einzige Grund, warum dies besser ist als das Hinzufügen overflow:hidden;zu #content, ist, dass Sie absolut positionierte untergeordnete Elemente überlaufen lassen und trotzdem sichtbar sein können. Außerdem können Kastenschatten weiterhin sichtbar sein.

tybro0103
quelle
Auch eine großartige Lösung, aber es ist erwähnenswert, dass dies in IE8 nicht funktioniert. Es tut mir wirklich weh, derjenige zu sein, der das sagt, und ich entschuldige mich dafür, dass ich "dieser Typ" bin.
Jbird
@Jbird try #content:after(nur ein Doppelpunkt statt zwei) ... Wenn ich mich richtig erinnere, ist es besser, zwei Doppelpunkte für Pseudoelemente zu verwenden, aber ältere IEs erkennen ihn nur, wenn er einen hat. ... oder so ähnlich - es ist schon einige Zeit her, dass ich mich mit diesem Thema befasst habe.
tybro0103
10

Keine der Antworten beantwortet die ursprüngliche Frage.

Die Frage ist, wie man ein Div mit CSS in zwei Spalten aufteilt.

Alle obigen Antworten binden tatsächlich 2 Divs in ein einzelnes Div ein, um 2 Spalten zu simulieren. Dies ist eine schlechte Idee, da Sie Inhalte nicht dynamisch in die beiden Spalten fließen lassen können.

Verwenden Sie also anstelle des oben genannten ein einzelnes div, das mit CSS wie folgt 2 Spalten enthält ...

.two-column-div {
 column-count: 2;
}

Weisen Sie das Ob als Klasse einem Div zu, und es wird tatsächlich seinen Inhalt in die 2 Spalten fließen lassen. Sie können auch weiter gehen und Lücken zwischen den Rändern definieren. Abhängig vom Inhalt des div müssen Sie möglicherweise mit den Wortumbruchwerten herumspielen, damit Ihr Inhalt nicht zwischen den Spalten aufgeteilt wird.

Rodney P. Barbati
quelle
9

Aus welchem ​​Grund auch immer ich die Clearing-Ansätze nie gemocht habe, ich verlasse mich für solche Dinge auf Floats und prozentuale Breiten.

Hier ist etwas, das in einfachen Fällen funktioniert:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

Wenn Sie Inhalte einfügen, werden Sie feststellen, dass dies funktioniert:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

Sie können es hier sehen: http://cssdesk.com/d64uy


quelle
8

Machen Sie Kinder Divs inline-blockund sie werden nebeneinander positionieren:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

Siehe Demo

Oriol
quelle
Ich bevorzuge diese Methode auch gegenüber float. Manchmal muss ein gesetzt werden: vertikal ausrichten: oben; (oder unten usw.) sowohl am linken als auch am rechten Element, wenn sie nicht die gleiche Größe haben.
James
4

Ich weiß, dass dieser Beitrag alt ist, aber wenn jemand von euch noch nach einer einfacheren Lösung sucht.

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}
Dexter
quelle
3

Der beste Weg, um ein Div vertikal zu teilen -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}
UberNeo
quelle
3

Sie können Flexbox verwenden , um das Layout Ihres div-Elements zu steuern:

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}
<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

Mohammad Usman
quelle
1
Aus zig ähnlichen Versuchen finde ich, dass dies (bisher) The Best funktioniert hat. Alle anderen, die ich gefunden (und ausprobiert) habe, lassen den Inhalt überlaufen . Vielen Dank.
user12379095
1

Schwimmer beeinflussen den Durchfluss nicht. Was ich dazu neige, ist a hinzuzufügen

<p class="extro" style="clear: both">possibly some content</p>

am Ende des 'Wrapping Div' (in diesem Fall Inhalt). Ich kann dies semantisch begründen, indem ich sage, dass ein solcher Absatz erforderlich sein könnte. Ein anderer Ansatz ist die Verwendung eines Clearfix-CSS:

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

Der Trick mit den Kommentaren besteht in der Cross-Browser-Kompatibilität.

Gazzer
quelle
0

Dies wird am besten hier beantwortet Frage 211383

Heutzutage sollte jede Person mit Selbstachtung den angegebenen "Micro-Clearfix" -Ansatz zum Löschen von Schwimmern verwenden.

Jbird
quelle
0
  1. Stellen Sie die Schriftgröße im übergeordneten DIV auf Null ein.
  2. Legen Sie die Breite% für jeden untergeordneten DIV fest.

    #content {
        font-size: 0;
    }
    
    #content > div {
        font-size: 16px;
        width: 50%;
    }

* In Safari müssen Sie möglicherweise 49% festlegen, damit es funktioniert.

Berezh
quelle
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich dabei, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
msrd0
0

Das Teilen einer Unterteilung in zwei Spalten ist sehr einfach. Geben Sie einfach die Breite Ihrer Spalte besser an, wenn Sie diese eingeben (z. B. Breite: 50%) und setzen Sie den Gleitkommawert: links für die linke Spalte und den Gleitkommawert: rechts für die rechte Spalte.

Rashid Jorvee
quelle
Bitte fügen Sie weitere Informationen mit relevanten Tags hinzu.
Aman Garg
Ich hoffe, dieser Code wird Ihnen helfen, dies besser zu verstehen. @AmanGarg CSS: #column { overflow:auto; width: 100%; } #column50pleft, #column50pright{ width: 49%; margin:2px; padding: 0.5%; background: white; } #column50pleft { float:left; } #column50pright { float:right; } HTML: <div id="column"> <div id="column50pleft"> </div> <div id="column50pright"> </div> </div>
Rashid Jorvee