Zurb Foundation 균등화 그리드: 그리드 셀 내부의 div 하단에 콘텐츠를 배치하는 방법 (Zurb Foundation equalised grid: how to position content at bottom of div inside grid cell)

문제 설명

Zurb Foundation 균등화 그리드: 그리드 셀 내부의 div 하단에 콘텐츠를 배치하는 방법 (Zurb Foundation equalised grid: how to position content at bottom of div inside grid cell)

div의 맨 아래에 콘텐츠를 배치하는 방법에 대해 많은 질문이 있으며 일반적으로 요즘 Flexbox로 하는 것이 그리 어렵지 않습니다.

하지만 저는 이퀄라이제이션과 함께 Zurb Foundation 그리드를 사용합니다. 내 cell에 이미지(고정 높이)와 캡션(가변 길이)이 포함되어 있기 때문에 균등화가 필요합니다.

캡션에는 제목(이미지 바로 아래에 있음)과 이미지 카드 하단에 앉고 싶은 자막이 포함됩니다.

여기에 내가 무엇을 표시하는지 보여주는 Codepen이 있습니다. https://codepen.io/arokat/pen/ZEbzOMp</ 피>

나는' 제안된 솔루션(flexbox, .image‑card‑caption__title에서 height: 100% 설정 등)을 많이 시도했지만 자막을 얻을 수 없습니다. 바닥에 붙어 + 올바른 전체 모양을 얻으십시오. (절대 위치 설정 + bottom: 0은 전체 레이아웃을 버립니다...)

제 생각에는 div의 높이가 JS 이후까지 설정되지 않는다는 것이 문제인 것 같습니다. 이퀄라이제이션 코드가 실행됩니다 ‑ 그래서 모든 CSS 규칙이 잘못된 시간에 적용됩니다.

.image‑card‑caption div에 고정 높이를 설정하는 것을 정말 피하고 싶습니다. , 제목 & 자막의 길이가 상당히 다를 수 있습니다.

생각이 있으신가요? 미리 감사드립니다 :)

현재 모습:

You can check it on this CodePen

Let me explain what I did.

1. When you are using a grid layout, Foundation has the option for you to make Block Grids. It's really simple and really easy to use and solves you the need to calculate how many columns must each breakpoint have. What I did was

<div class='grid‑x grid‑padding‑x small‑up‑1 medium‑up‑2 large‑up‑3'>

What this does is that it indicates to the container that it will have 1 block per‑row on small devices, 2 blocks per‑row on medium devices, and 3 blocks per‑row on large devices and above. All you have to do after that is just define a cell like this:

<div class='cell'>

As you can see, this is much easier than <div class='cell medium‑6 large‑4'> and it saves a lot of typing.

1. I specifically asked you above if you require to use the images in the img tag. Why? I like to use a transparent spacer with this svg element. It's really light.

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E">

What this does is that it creates a 1x1 SVG image, but since it doesn't have a specific width and height it just has a viewBox with a proportion 1:1 which is basically a square. That way it occupies the available space and creates a responsive square shape. Since it's transparent you can use the original image as a background of the parent element.

This way your .image‑card__image element will always have the same proportion in each .image‑card element, thus allowing you to use data‑equalizer specifically for the titles.

1. Data‑equalizer can actually be used on multiple elements, syncing multiple heights, but the structure in this case does not really require that. What I did was basically name the data‑equalizer to title (you can check more on that here) and I assigned the data‑equalizer‑watch='title' parameters to the title container elements.

Also, I didn't use the flex definitions you had for .image‑card__image. Using the SVG they are not really necessary.

Do those changes work for you?

(by arokath、Mihail Minkov)

참조 문서

1. Zurb Foundation equalised grid: how to position content at bottom of div inside grid cell (CC BY‑SA 2.5/3.0/4.0)