Я пытаюсь создать систему меню с изображением и текстом выше и ниже. Данные являются динамическими. Я хочу, чтобы система меню появилась так, чтобы каждое изображение было на одинаковом расстоянии друг от друга, чтобы они выстраивались в сетку изображений как по горизонтали, так и по вертикали.
Проблема в тексте. Если текст длиннее, чем изображение, то div увеличивается. Однако, тогда это создает неловко выглядящий промежуток, поскольку изображения больше не равны друг другу.
Чтобы обойти это, я думаю, что наилучшим подходом было бы, чтобы каждый из остальных div принимал размер большего div. Однако я не уверен, как это сделать.
Я попытался с flexbox, используя flex-wrapсвойство. Несмотря на то, что это выглядит красиво, я не смог найти способ заставить каждое из изображений выровняться на одинаковом расстоянии друг от друга.
Как мне добиться этого?
Мой код выглядит следующим образом:
#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. Я также не уверен, почему мои разделы div увеличивают свой рост. Таким образом, любое понимание этого также будет оценено.
align-itemsустановленыstretchпо умолчанию. Вы можете легко изменить это:align-items: flex-start;Ответы:
Не уверен, что вы можете сделать так, чтобы каждый элемент становился таким же большим, как самый большой элемент, но если вы можете предположить, что вам нужно определенное количество элементов в каждой строке, просто сделайте их равными по размеру. Я думаю, что это гораздо проще сделать с помощью сетки CSS, а не flexbox. Смотрите решение ниже. Я использую сетку, чтобы расположить элементы раздела, а также чтобы убедиться, что внутри каждого раздела все три части (верхний текст, изображение, нижний текст) занимают ровно 1/3 деления каждой - это нужно для того, чтобы все изображения также были выровнены по вертикали. , Кроме того, я использую flex в ярлыках, чтобы убедиться, что тексты находятся посередине (по горизонтали и вертикали).
источник
Дайте этому быстрому раскрытию кода. Единственное, чего не хватает, так это медиа-запроса о том, как вести себя, когда он не может поместиться в 3 столбца подряд, для которых все, что я хотел бы изменить, - это
max-widthсвойство, которое нужно50% - individual item padding left and right - how much space you want betweenизменить, и изменить егоflex: 1 33%наflex: 1 55%(Вы можете пропустить значение отступа, если вы измените, как работает размер блока, чтобы ширина включала отступ в его ширине с помощью свойства размера блока, как это )
https://codepen.io/mihaelnikic/pen/bGGPBYG
CSS :
источник
Я надеюсь, это поможет.
CSS
HTML
источник
Вы можете попробовать добавить ширину и разрыв слов к контейнеру меток и соответственно отрегулировать ширину
источник
Если я правильно понимаю вашу проблему, то странный пробел, от которого вы хотите избавиться, - это тот, который находится во втором ряду после того, как ваш первый ряд обернут. Если это все, что вы пытаетесь решить, то, возможно, все, что вам нужно сделать, - это перейти
justify-contentсspace-betweenнаflex-startс добавлением поля для ваших.sectionэлементов и отступов в ваших#mainнастройках, чтобы соответствовать. Интервал теперь будет 20 пикселей между всеми изображениями.Если вам не нравится , как это выглядит, вы можете попробовать другие
justify-contentценности , такие какflex-start,flex-end,space-around,space-evenly.Кроме того, вы можете избавиться
justify-contentи использовать,flex-growчтобы расширить каждый,.sectionчтобы соответствовать его среде.В качестве альтернативы, если вы хотите, чтобы их желоба выстроились в линию, при этом расширяясь, чтобы соответствовать
.sectionсодержимому элемента, вы можете попробовать использоватьdisplay: tableвместо этого.Недостатком здесь является то, что вам нужно разделить HTML на строки.
Если вы действительно хотите, чтобы все
.sectionэлементы расширялись, чтобы они были равны наибольшему.sectionэлементу,вам, скорее всего, понадобится использовать JavaScript, так как элементы одного уровня в CSS мало знают друг о друге.
Вы можете добавить следующий JavaScript на свою страницу и настроить CSS следующим образом:
источник
Я бы также предложил CSS Grid.
Вы указываете 3 столбца и 2 строки, которые одинаково разделяют ширину между собой, и указываете разделам иметь небольшое поле для отображения промежутков между ними:
источник
Я думаю, что чисто решение CSS со всеми этими критериями невозможно, но возможно решение JS в сочетании с CSS Grid.
Чистое решение CSS, в котором элемент динамически адаптируется к тексту и задает изменения для всех других элементов, невозможно. Мы можем динамически установить ширину элемента для адаптации к тексту, но мы не можем сделать эту ширину минимальной для всех других элементов, имеющих такой же класс.
источник
divи позвольте отступам, границам. и тоmin-widthиmin-heightв основномdiv.Это оно:
проверьте https://jsfiddle.net/sugandhnikhil/b216mx5d/
измените размер окна, чтобы увидеть равномерное расстояние между изображениями !!!!
Благодаря тонну!!!!!!!
:-)
источник
Просто интересно, почему длина текста определяет размер
div? Разве это не сделает интерфейс странным? Я бы предложил установить ширину для метки и переполнения всего текстаellipsis (...). При этом вам не нужныJavaScriptкоды, только некоторые дополнительныеcssдля вас.label. Вот фрагмент. Это выглядело бы намного лучше, чемdivизменение размеров, когда будет длинный текст.Если вы беспокоитесь о том, «как мои зрители могут прочитать остальную часть текста?» то вы можете просто применить некоторые эффекты
on hoverк вашемуellipsisкак этот codepen образца (образец не у меня) или , возможно , попробовать что - то вроде этого SO решения .Надеюсь это поможет!
источник
Это немного отличается от того, что предлагают другие ответы. Вы можете рассмотреть возможность усечения текста.
источник