Podziel Div na 2 kolumny za pomocą CSS

90

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!

PF1
źródło
2
Jest tak wiele rozwiązań, że możesz to zobaczyć: stackoverflow.com/questions/211383/…
enmaai

Odpowiedzi:

60

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.

Rob Van Dam
źródło
17
Szkoda, że ​​tak wiele razy było to popierane. Naprawdę powinieneś unikać obcych znaczników, zwłaszcza biorąc pod uwagę, że istnieją inne realne, szeroko stosowane środki zaradcze.
Jbird,
91

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>
Navish
źródło
3
Jeśli to wszystko, co robisz, element nadrzędny tych elementów nie będzie miał wzrostu.
tybro0103
Łatwe i skuteczne. Dziękuję Ci!
Alexis Gamarra,
47

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.

tybro0103
źródło
1
Zachęcam czytelników do sprawdzenia mojej drugiej odpowiedzi. Myślę, że jest lepszy niż ten.
tybro0103
1
jeszcze jedna uwaga: overflow:auto;czasami może być lepszą opcją
tybro0103 Kwietnia
To zdecydowanie skuteczny środek. Warto jednak wspomnieć, że może to spowodować pewne oczywiste wyzwania związane z układem. Na przykład, jeśli chcę, aby przepełnienie mojego elementu nadrzędnego było widoczne.
Jbird
16

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.

tybro0103
źródło
Również świetne rozwiązanie, ale warto w tym miejscu wspomnieć, że nie działa to w IE8. Naprawdę boli mnie to, że to powiedziałem i przepraszam za bycie „tym facetem”.
Jbird,
@Jbird try #content:after(tylko jeden dwukropek zamiast dwóch) ... O ile dobrze pamiętam, właściwsze jest użycie dwóch dwukropków dla pseudoelementów, ale starsze IE rozpoznają go tylko wtedy, gdy ma jeden. ... czy coś takiego - minęło sporo czasu, odkąd zająłem się tym problemem.
tybro0103
12

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

Rodney P. Barbati
źródło
9

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


źródło
8

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

Oriol
źródło
Wolę również tę metodę niż float. Czasami trzeba ustawić a: vertical-align: top; (lub na dole itp.) na lewym i prawym elemencie, jeśli nie mają tego samego rozmiaru.
james
4

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;
}
Dexter
źródło
3

Najlepszy sposób na podzielenie elementu div w pionie -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}
UberNeo
źródło
3

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>

Mohammad Usman
źródło
1
Z miliona podobnych prób stwierdzam, że to (jak dotąd) zadziałało najlepiej. Wszystkie inne, które znalazłem (i wypróbowałem), pozwalają na przepełnienie zawartości . Dzięki wielkie.
user12379095
1

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.

Gazzer
źródło
0

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

Jbird
źródło
0
  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.

Bereż
źródło
Chociaż ten fragment kodu może rozwiązać problem, dołączenie wyjaśnienia naprawdę pomaga poprawić jakość Twojego posta. Pamiętaj, że odpowiadasz na pytanie do czytelników w przyszłości, a osoby te mogą nie znać powodów, dla których zaproponowałeś kod.
msrd0
0

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.

Rashid Jorvee
źródło
Dodaj więcej informacji z odpowiednimi tagami.
Aman Garg
mam nadzieję, że ten kod pomoże ci to lepiej zrozumieć; @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