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!
Odpowiedzi:
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.
źródło
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>
źródło
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.
źródło
overflow:auto;
czasami może być lepszą opcją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.źródło
#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.Ż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.
źródło
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
Utwórz elementy div jako elementy podrzędne
inline-block
i ustaw je obok siebie:#content { width: 500px; height: 500px; } #left, #right { display: inline-block; width: 45%; height: 100%; }
Zobacz Demo
źródło
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; }
źródło
Najlepszy sposób na podzielenie elementu div w pionie -
#parent { margin: 0; width: 100%; } .left { float: left; width: 60%; } .right { overflow: hidden; width: 40%; }
źródło
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>
źródło
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.
źródło
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”.
źródło
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.
źródł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.
źródło
#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>