Mam dwa divy obok siebie. Chciałbym, aby ich wysokość była taka sama i pozostała taka sama, jeśli jeden z nich zmieni rozmiar. Nie mogę tego rozgryźć. Pomysły?
Aby wyjaśnić moje mylące pytanie, chciałbym, aby oba pola były zawsze tego samego rozmiaru, więc jeśli jeden rośnie, ponieważ tekst jest w nim umieszczony, drugi powinien urosnąć, aby dopasować się do wysokości.
<div style="overflow: hidden">
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!
</div>
</div>
html
css
html-table
flexbox
NibblyPig
źródło
źródło
Odpowiedzi:
Flexbox
Dzięki Flexbox jest to jedna deklaracja:
W starszych przeglądarkach mogą być wymagane prefiksy, zobacz wsparcie przeglądarki .
źródło
flex-direction: column
: jsfiddle.net/sdsgW/1Jest to często spotykany problem, ale na szczęście niektóre inteligentne umysły, takie jak Ed Eliot na swoim blogu , opublikowały swoje rozwiązania online.
Zasadniczo to, co robisz, to uczynienie obu div / kolumn bardzo wysokimi przez dodanie
padding-bottom: 100%
a następnie „oszukanie przeglądarki”, aby pomyślały, że nie są tak wysokie przy użyciumargin-bottom: -100%
. Lepiej to wyjaśnia Ed Eliot na swoim blogu, który zawiera również wiele przykładów.źródło
padding: 7px 10px
Jeślipadding-bottom
właściwość jest ustawiona na 100%? (PSoverflow:hidden
był również wymagany dla mnie narow
)Jest to obszar, w którym CSS nigdy tak naprawdę nie miał żadnych rozwiązań - sprowadzasz się do używania
<table>
tagów (lub udawania ich za pomocądisplay:table*
wartości CSS ), ponieważ jest to jedyne miejsce, w którym zaimplementowano „utrzymywanie grupy elementów na tej samej wysokości”.Działa to we wszystkich wersjach Firefox, Chrome i Safari, Opera od wersji co najmniej 8 oraz w IE od wersji 8.
źródło
table
zamiasttable-row
?width
dla swoich div, chyba że dodaszdisplay: table
element nadrzędny, który zepsuje wszystko.Korzystanie z jQuery
Korzystając z jQuery, możesz to zrobić w bardzo prostym skrypcie z jedną linią.
Korzystanie z CSS
To jest trochę bardziej interesujące. Technika nosi nazwę Faux Columns . Mniej więcej tak naprawdę nie ustawiasz rzeczywistej wysokości na taką samą, ale ustawiasz niektóre elementy graficzne, aby wyglądały na tę samą wysokość.
źródło
Dziwi mnie, że nikt nie wspomniał o (bardzo starej, ale niezawodnej) technice Absolute Columns: http://24ways.org/2008/absolute-columns/
Moim zdaniem jest znacznie lepszy zarówno od Faux Column, jak i techniki One True Layout.
Ogólna idea jest taka, że element z
position: absolute;
ustawi się względem najbliższego elementu nadrzędnego, który maposition: relative;
. Następnie rozciągasz kolumnę, aby wypełnić 100% wysokości, przypisując zarówno atop: 0px;
ibottom: 0px;
(lub dowolną liczbę pikseli / procentów, których faktycznie potrzebujesz). Oto przykład:źródło
Aby to zrobić, możesz użyć wtyczki Jquery's Equal Heights, która sprawia, że wszystkie div mają dokładnie taką samą wysokość jak inne. Jeśli jeden z nich rośnie, a drugi także rośnie.
Oto próbka implementacji
Tutaj jest link
http://www.cssnewbie.com/equalheights-jquery-plugin/
źródło
Możesz użyć Faux Columns .
Zasadniczo wykorzystuje obraz tła w zawierającym DIV do symulacji dwóch DIV o równej wysokości. Korzystanie z tej techniki pozwala również dodawać cienie, zaokrąglone rogi, niestandardowe ramki lub inne funky wzory do pojemników.
Działa tylko z polami o stałej szerokości.
Dobrze przetestowany i poprawnie działający w każdej przeglądarce.
źródło
Właśnie zauważyłem ten wątek, szukając tej odpowiedzi. Właśnie stworzyłem małą funkcję jQuery, mam nadzieję, że to pomoże, działa jak urok:
JAVASCRIPT
HTML
źródło
Siatka CSS
Współczesnym sposobem na zrobienie tego (co pozwala również uniknąć deklarowania
<div class="row"></div>
owijarki co dwa elementy) byłoby wykorzystanie siatki CSS. Zapewnia to również łatwą kontrolę odstępów między wierszami / kolumnami przedmiotów.źródło
To pytanie zostało zadane 6 lat temu, ale nadal warto udzielić prostej odpowiedzi w układzie Flexbox .
Wystarczy dodać następujący ojciec CSS
<div>
, to zadziała.Pierwsze dwa wiersze deklarują, że będzie wyświetlany jako flexbox. I
flex-direction: row
informuje przeglądarki, że jego dzieci będą wyświetlane w kolumnach. Ialign-items: stretch
spełni warunek, że wszystkie elementy potomne rozciągną się na tę samą wysokość, na której jeden z nich będzie wyższy.źródło
I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.
które nie jest wymienione w zaakceptowanej odpowiedzi ... Właśnie ukończyłem tutaj. Może powinienem był to skomentować przy przyjętej odpowiedzi?align-items: stretch;
domyślne ustawienie Flex?Korzystanie z CSS Flexbox i minimalnej wysokości działało dla mnie
Powiedzmy, że masz pojemnik z dwoma divami w środku i chcesz, aby te dwa divy miały tę samą wysokość.
Można ustawić „ display: flex ” na pojemniku, a także „ align-items: stretch ”
Następnie daj dziecku divs „ minimalną wysokość ” 100%
Zobacz poniższy kod
źródło
Jeśli nie masz nic przeciwko temu, że jeden z
div
nich jest mistrzem i dyktuje wysokość dla obudiv
s, to:Skrzypce
Niezależnie od tego,
div
po prawej stronie rozszerzy się lub zgniotu i przepełnienia, aby dopasować się do wysokościdiv
po lewej stronie.Oba
div
s muszą być bezpośrednimi potomkami kontenera i muszą określać w nim swoje szerokości.Odpowiedni CSS:
źródło
W tym celu lubię używać pseudoelementów. Możesz użyć go jako tła treści i pozwolić im wypełnić przestrzeń.
Dzięki takiemu podejściu można ustawić marginesy między kolumnami, granicami itp.
źródło
Fiddle
HTML
CSS
źródło
Próbowałem już prawie wszystkich wyżej wymienionych metod, ale rozwiązanie Flexbox nie będzie działać poprawnie w Safari, a metody układu siatki nie będą działać poprawnie ze starszymi wersjami IE.
To rozwiązanie pasuje do wszystkich ekranów i jest kompatybilne z różnymi przeglądarkami:
Powyższa metoda będzie równa wysokości komórek, a dla mniejszych ekranów, takich jak telefon komórkowy lub tablet, możemy zastosować
@media
metodę wymienioną powyżej.źródło
możesz łatwo skorzystać z jQuery.
CSS
jQuery
HTML
Musisz dołączyć jQuery
źródło
<div>
mają zawartość dynamiczną. Powodem, dla którego mówię, jest to,<div class="right">
że jeśli mam więcej treści niż powstaje inny problem.Wiem, że minęło dużo czasu, ale i tak udostępniam swoje rozwiązanie. To sztuczka jQuery.
--- HTML
---- CSS
--- JQUERY
źródło
Jest to wtyczka jQuery, która ustawia jednakową wysokość dla wszystkich elementów w tym samym rzędzie (poprzez sprawdzenie offset.top elementu. Top). Więc jeśli tablica jQuery zawiera elementy z więcej niż jednego wiersza (inny offset.top), każdy wiersz będzie miał oddzielną wysokość, w oparciu o element o maksymalnej wysokości w tym rzędzie.
};
źródło
źródło
Miałem ten sam problem, więc utworzyłem tę małą funkcję za pomocą jquery, ponieważ jquery jest obecnie częścią każdej aplikacji internetowej.
Możesz wywołać tę funkcję na zdarzeniu gotowości strony
Mam nadzieję, że to ci odpowiada.
źródło
Ostatnio się z tym spotkałem i nie podobały mi się rozwiązania, więc spróbowałem eksperymentować.
.mydivclass {inline-block; vertical-align: middle; width: 33%;}
źródło
To, co zrobiłem tutaj, to zmiana wysokości na wysokość minimalną i nadanie jej stałej wartości. jeśli jeden z nich zmienia rozmiar, drugi pozostanie na tej samej wysokości. nie jestem pewien, czy tego właśnie chcesz
źródło