LAYOUT LAB / CANONICAL HTML + CSS

line-up

Keep card footer actions aligned at the bottom.

720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드
<article class="line_up" aria-labelledby="line-up-title">
    <section class="line_up_body"><h2 id="line-up-title">Implementation proposal</h2><p>Variable-length summary copy sits above the aligned action row.</p></section>
    <footer class="line_up_footer"><button>Review proposal</button></footer>
</article>

<style>
.line_up {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.line_up_body {
    min-block-size: 0;
}

.line_up_footer {
    margin-block-start: auto;
}

</style>
원문 가이드