Podziel Div na 2 kolumny za pomocą CSS

Próbowałem podzielić div na dwie kolumny za pomocą CSS, ale nie udało mi się jeszcze go uruchomić. Moja podstawowa struktura jest następująca:

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

Jeśli spróbuję przesunąć prawy i lewy element div do odpowiednich pozycji (prawy i lewy), wydaje się, że ignoruje on kolor tła elementu div zawartości. A inny kod, który wypróbowałem z różnych witryn, nie wydaje się być w stanie przetłumaczyć na moją strukturę.

Dzięki za pomoc!

Gdy umieścisz te dwa elementy div w zmiennej, element div zawartości zwija się do zerowej wysokości. Poprostu dodaj

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

po #right div, ale wewnątrz elementu div content. To zmusi element DIV z zawartością do otaczania dwóch wewnętrznych, pływających elementów DIV.

To działa dobrze dla mnie. Ekran podzieliłem na dwie połowy: 20% i 80%:

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

<div style="width: 80%; float:right">
   #right content in there
</div>

Innym sposobem na to jest dodanie overflow:hidden;do elementu nadrzędnego elementów pływających.

przepełnienie: ukryty spowoduje, że element urosnie, aby zmieścić się w elementach pływających.

W ten sposób można to wszystko zrobić w css, zamiast dodawać kolejny element HTML.

Najbardziej elastyczny sposób, aby to zrobić:

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

Działa to dokładnie tak samo, jak dołączenie elementu do #content:

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

ale bez faktycznego dodawania elementu. :: after nazywany jest pseudoelementem. Jedynym powodem, dla którego jest to lepsze niż dodawanie overflow:hidden;do #content, jest to, że możesz przepełnić pozycjonowane bezwzględnie elementy potomne i nadal być widoczne. Pozwoli również, że cienie pudełkowe będą nadal widoczne.

Żadna z udzielonych odpowiedzi nie odpowiada na pierwotne pytanie.

Pytanie brzmi, jak podzielić element DIV na 2 kolumny za pomocą CSS.

Wszystkie powyższe odpowiedzi w rzeczywistości osadzają 2 elementy div w jednym elemencie div, aby zasymulować 2 kolumny. To zły pomysł, ponieważ nie będziesz w stanie przepływać zawartości do dwóch kolumn w żaden dynamiczny sposób.

Dlatego zamiast powyższego użyj pojedynczego elementu div, który jest zdefiniowany jako zawierający 2 kolumny za pomocą CSS w następujący sposób ...

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

przypisz powyższe jako klasę do elementu div, a jego zawartość zostanie faktycznie przeniesiona do dwóch kolumn. Możesz pójść dalej i zdefiniować przerwy między marginesami. W zależności od zawartości elementu div, może być konieczne zmieszanie wartości podziału na słowa, aby zawartość nie została podzielona między kolumny.

Z jakiegoś powodu, dla którego nigdy nie podobały mi się metody oczyszczania, w takich przypadkach polegam na pływakach i procentach szerokości.

Oto coś, co działa w prostych przypadkach:

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

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

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

Jeśli umieścisz jakieś treści, zobaczysz, że to działa:

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

Możesz to zobaczyć tutaj: http://cssdesk.com/d64uy

Utwórz elementy div jako elementy podrzędne inline-blocki ustaw je obok siebie:

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

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

Zobacz Demo

Wiem, że ten post jest stary, ale jeśli ktoś z was nadal szuka prostszego rozwiązania.

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

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

Najlepszy sposób na podzielenie elementu div w pionie -

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

Możesz użyć flexbox do kontrolowania układu elementu div:

* { 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>

Pływaki nie wpływają na przepływ. Zwykle dodaję

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

na końcu „opakowującego elementu div” (w tym przypadku zawartości). Mogę to uzasadnić semantycznie, mówiąc, że taki akapit może być potrzebny. Innym podejściem jest użycie przejrzystego CSS:

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

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

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

Sztuczka związana z komentarzami polega na kompatybilności z różnymi przeglądarkami.

Najlepiej odpowiedzieć na to pytanie tutaj Pytanie 211383

W dzisiejszych czasach każda szanująca się osoba powinna stosować określone podejście do usuwania pływaków „mikro-jasne”.

1. Ustaw rozmiar czcionki równy zero w nadrzędnym DIV.

2. Ustaw szerokość% dla każdego podrzędnego DIV.

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

* W Safari może być konieczne ustawienie 49%, aby działało.

Podzielenie podziału na dwie kolumny jest bardzo łatwe, po prostu określ lepiej szerokość swojej kolumny, jeśli umieścisz to (na przykład szerokość: 50%) i ustaw zmienną: lewą dla lewej kolumny i zmiennoprzecinkową: prawą dla prawej kolumny.