위아래 이미지와 텍스트로 메뉴 시스템을 만들려고합니다. 데이터는 동적입니다. 메뉴 시스템을 표시하여 각 이미지가 서로 다른 이미지와 동일한 거리를 유지하여 이미지가 가로 및 세로로 격자 모양으로 정렬되도록하고 싶습니다.
문제는 텍스트입니다. 텍스트가 이미지보다 길면 div가 확대됩니다. 그러나 이미지가 더 이상 서로 간격을 두지 않기 때문에 어색한 간격이 생깁니다.
이 문제를 해결하려면 가장 좋은 방법은 다른 div 각각이 더 큰 div의 크기를 채택하는 것입니다. 그러나이 작업을 수행하는 방법을 잘 모르겠습니다.
flex-wrap속성을 사용하여 flexbox로 시도 했습니다. 멋지게 포장하는 동안 각 이미지를 서로 같은 거리에 배치하는 방법을 찾을 수 없었습니다.
이것을 달성하려면 어떻게해야합니까?
내 코드는 다음과 같습니다.
#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>추신. 또한 섹션 div의 높이가 왜 증가하는지 잘 모르겠습니다. 따라서 이것에 대한 통찰력도 감사하겠습니다.
2
나는 그리드가 당신이 찾고있는 것이라고 생각합니다.
—
Siraj Alam
항목의 높이가 증가하는 이유는 기본적으로
—
Artur Noetzel
align-items설정되어 있기 때문 stretch입니다. 다음과 같이 쉽게 변경할 수 있습니다.align-items: flex-start;
현재 #main 너비는 450px입니다. 섹션 의 동적 콘텐츠 가 다음과 같은 경우 350px, 모두 새로운 행을 형성하지 않습니까? 너가 원하는게 그거야?
—
Gosi
@ 고시, 그래, 내가 원하는 것입니다.
—
kojow7 '12
부트 스트랩 4 클래스를 사용할 수 있습니다. 시도해 보았 니?
—
Revti Shah