Teilen Sie Div mithilfe von CSS in zwei Spalten auf

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!

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.

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>

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.

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.

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.

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

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

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

Der beste Weg, um ein Div vertikal zu teilen -

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

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>

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.

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.

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.

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.