Próbuję stworzyć system menu z obrazem i tekstem powyżej i poniżej. Dane są dynamiczne. Chcę, aby system menu pojawił się w taki sposób, aby każdy obraz był w równej odległości od siebie, tak aby ustawiał się w siatce obrazów zarówno w poziomie, jak i w pionie.
Problemem jest tekst. Jeśli tekst jest dłuższy niż obraz, div zostaje powiększony. Jednak wówczas tworzy niezręcznie wyglądającą lukę, ponieważ obrazy nie są już w równych odstępach od siebie.
Aby obejść ten problem, myślę, że najlepszym rozwiązaniem byłoby, aby każdy z divów przyjął rozmiar większego diva. Nie jestem jednak pewien, jak to zrobić.
Próbowałem z Flexbox za pomocą flex-wrapwłaściwości. Chociaż ładnie się pakuje, nie udało mi się znaleźć sposobu, aby każdy z obrazów znalazł się w równej odległości od siebie.
Jak mogę to osiągnąć?
Mój kod jest następujący:
#outer {
display: flex;
}
#main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 20px;
}
.section {
background-color: #ddd;
padding: 15px;
}
.label, .icon {
text-align: center;
}<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>PS. Nie jestem również pewien, dlaczego moje sekcje div zwiększają swoją wysokość. Doceniony zostanie zatem każdy wgląd w to.
align-itemsjest ustawieniestretchdomyślne. Możesz łatwo to zmienić:align-items: flex-start;Odpowiedzi:
Nie jestem pewien, czy możesz to zrobić, aby każdy element stał się tak duży, jak największy element, ale jeśli możesz założyć, że chcesz określoną liczbę elementów w każdym rzędzie, po prostu ułóż je równej wielkości. Myślę, że o wiele łatwiej to zrobić za pomocą siatki css zamiast flexboksa. Zobacz rozwiązanie poniżej. Używam siatki do pozycjonowania elementów przekroju , a także dla upewnienia się, że wewnątrz każdej sekcji wszystkie trzy części (górny tekst, obraz, dolny tekst) zajmują dokładnie 1/3 części div - w celu zapewnienia, że wszystkie obrazy również wyrównują się w pionie . Ponadto używam flex w etykietach, aby upewnić się, że teksty są na środku (poziomo i pionowo).
źródło
Daj temu kodepenowi szybki obrót. Brakuje tylko zapytania medialnego o to, jak się zachować, gdy nie można dopasować 3 kolumn w rzędzie, dla których wszystko, co chciałbym zmienić, to
max-widthwłaściwość, którą należy50% - individual item padding left and right - how much space you want betweenzmienić i zmienićflex: 1 33%naflex: 1 55%(Można pominąć wartość dopełnienia jeśli zmienić sposób pudełko wielkości dzieła tak, że szerokość obejmuje dopełnienie w jego szerokości z własności skrzynkowej wielkości jak ten )
https://codepen.io/mihaelnikic/pen/bGGPBYG
CSS :
źródło
Mam nadzieję, że to pomoże.
CSS
HTML
źródło
Możesz spróbować dodać szerokość i podział na słowa do kontenera etykiet i odpowiednio dostosować szerokość
źródło
Jeśli dobrze rozumiem twój problem, dziwną luką, której chcesz się pozbyć, jest ta w drugim rzędzie, gdy pierwszy rząd się zawija. Jeśli to wszystko starasz się rozwiązać, to może wszystko, co trzeba zrobić, to zmiana
justify-contentodspace-betweendoflex-startz marginesem dodany do.sectionelementów i wyściółka w swoim#maindopasować do. Odstępy między wszystkimi obrazami będą teraz wynosić 20 pikseli.Jeśli nie podoba ci się sposób, który wygląda, można spróbować innych
justify-contentwartości jakflex-start,flex-end,space-around,space-evenly.Możesz też pozbyć się każdego z nich
justify-contenti użyćflex-growgo,.sectionaby dopasować każdy do otoczenia.Alternatywnie, jeśli chcesz, aby ich rynny ustawiły się w linii, a jednocześnie rozwijały się w celu dopasowania do
.sectionzawartości każdego elementu, możesz spróbować użyćdisplay: tablezamiast tego.Wadą jest to, że musisz podzielić HTML na wiersze.
Jeśli zamiast tego naprawdę chcesz, aby wszystkie
.sectionelementy były równe największemu.sectionelementowi,najprawdopodobniej będziesz musiał użyć JavaScript, ponieważ elementy rodzeństwa w CSS niewiele o sobie wiedzą.
Możesz dodać następujący kod JavaScript do swojej strony i dostosować CSS jako taki:
źródło
Sugerowałbym również CSS Grid.
Podajesz 3 kolumny i 2 wiersze, które dzielą szerokość równomiernie między sobą, i mówisz sekcjom, że mają mały margines, aby pokazywać przerwy między nimi:
źródło
Rozwiązanie czysto CSS spełniające wszystkie te kryteria jest, moim zdaniem, niemożliwe, ale rozwiązanie JS w połączeniu z CSS Grid jest możliwe.
Czyste rozwiązanie CSS, w którym element dynamicznie dostosowuje się do tekstu i ustawia zmiany na wszystkie inne elementy, nie jest możliwe. Możemy dynamicznie ustawić szerokość elementu, aby dostosować się do tekstu, ale nie możemy ustawić tej szerokości jako minimalnej dla wszystkich innych elementów, które mają tę samą klasę.
źródło
divi pozwól, aby wypełnienia, granice. amin-widthimin-heightw głównymdiv.To jest to:
sprawdź https://jsfiddle.net/sugandhnikhil/b216mx5d/
zmień rozmiar okna, aby zobaczyć ekwipunek między obrazem !!!!
Dzięki tona !!!!!!!
:-)
źródło
Zastanawia mnie tylko, dlaczego długość tekstu określa wielkość pliku
div? Czy to nie spowodowałoby, że interfejs byłby dziwny? Sugeruję ustawienie szerokości etykiety i całego przelewu tekstuellipsis (...). Dzięki temu nie potrzebujeszJavaScriptkodów, a tylko niektóre dodatkowecssdla twojego.label. Oto fragment. To wyglądałoby o wiele lepiej niżdivzmiana rozmiarów, gdy pojawi się długi tekst.Jeśli martwisz się, „jak moi widzowie mogą przeczytać resztę tekstu?” wtedy możesz po prostu zastosować niektóre efekty
on hoverdo swojej próbkiellipsiskodepen (próbka nie moja) lub może spróbować czegoś takiego jak to rozwiązanie SO .Mam nadzieję że to pomoże!
źródło
Jest to nieco inny kąt niż sugerują inne odpowiedzi. Możesz rozważyć obcięcie tekstu.
źródło