div의 내용을 맨 아래에 정렬하는 방법
다음과 같은 CSS 및 HTML 코드가 있다고 가정합니다.
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>헤더 섹션은 고정 높이이지만 헤더 내용이 변경될 수 있습니다.
헤더의 내용이 헤더 섹션의 하부에 수직으로 정렬되어 텍스트의 마지막 행이 헤더 섹션의 하부에 "붙어" 있도록 하고 싶습니다.
따라서 텍스트가 한 줄만 있는 경우 다음과 같습니다.
-----------------------------| 머리글 제목|||| 헤더 콘텐츠(1줄로 표시)-----------------------------
그리고 세 개의 줄이 있는 경우:
-----------------------------| 머리글 제목|| 헤더 콘텐츠 (그렇게 되어 있습니다)| 많은 것들이 완벽하게| 3행 이상)-----------------------------
이것은 CSS에서 어떻게 실행할 수 있습니까?
Relative+Absolute 포지셔닝이 최선의 방법입니다.
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}<div id="header">
<h1>Title</h1>
<div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>하지만 문제가 생길 수 있습니다.시도해보니 내용 아래에 드롭다운 메뉴가 뜨는 문제가 있었습니다.그냥 예쁘지 않아요.
솔직히 수직 중심 문제나 아이템의 수직 정렬 문제는 높이가 정해져 있지 않습니다.테이블을 사용하는 것만으로 간단합니다.
예: 표를 사용하지 않고 이 HTML 레이아웃을 수행할 수 있습니까?
레거시 브라우저가 걱정되지 않는 경우 Flexbox를 사용하십시오.
상위 요소의 표시 유형을 플렉스로 설정해야 합니다.
div.parent {
display: flex;
height: 100%;
}
그런 다음 하위 요소의 정렬 자체를 플렉스 엔드로 설정합니다.
span.child {
display: inline-block;
align-self: flex-end;
}
다음은 제가 배운 자료입니다.http://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS 포지셔닝 사용:
/* Creates a new stacking context on the header */
#header {
position: relative;
}
/* Positions header-content at the bottom of header's context */
#header-content {
position: absolute;
bottom: 0;
}
cletus에서 설명한 바와 같이 이 작업을 수행하려면 헤더 콘텐츠를 식별해야 합니다.
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
난 이 특성들을 사용했고, 효과가 있었어!
#header {
display: table-cell;
vertical-align: bottom;
}
한동안 같은 문제에 시달리다가 마침내 모든 요건을 충족하는 솔루션을 찾아냈습니다.
- 컨테이너의 높이를 알 필요는 없습니다.
- 상대+절대 솔루션과 달리 컨텐츠는 자체 레이어에 뜨지 않습니다(즉, 일반적으로 컨테이너 div에 포함됩니다).
- 브라우저 전체에서 동작합니다(IE8+).
- 심플한 실장.
은 한 가지 밖에 없다.<div>정렬기'라고 ''라고 부르죠.
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
이 트릭은 텍스트 기준선을 용기 맨 아래로 밀어넣는 키가 크고 마른 div를 작성함으로써 작동합니다.
OP가 요구하는 바를 실현하는 완전한 예를 다음에 제시하겠습니다."bottom_aligner"는 시연용으로만 두껍고 빨간색으로 만들었습니다.
CSS:
.outer-container {
border: 2px solid black;
height: 175px;
width: 300px;
}
.top-section {
background: lightgreen;
height: 50%;
}
.bottom-section {
background: lightblue;
height: 50%;
margin: 8px;
}
.bottom-aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 3px;
background: red;
}
.bottom-content {
display: inline-block;
}
.top-content {
padding: 8px;
}
HTML:
<body>
<div class="outer-container">
<div class="top-section">
This text
<br> is on top.
</div>
<div class="bottom-section">
<div class="bottom-aligner"></div>
<div class="bottom-content">
I like it here
<br> at the bottom.
</div>
</div>
</div>
</body>
현대적 방법은 플렉스박스를 사용하는 것입니다.아래 예를 참조하십시오.포장할 필요조차 없습니다.Some text...HTML 을 사용합니다.플렉스 컨테이너에 직접 포함된 텍스트는 익명의 플렉스 항목으로 래핑되기 때문입니다.
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>일부 텍스트만 있고 용기 하단에 수직으로 정렬하려는 경우.
section {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
align-items: flex-end; /* bottom of the box */
}<section>Some text aligns to the bottom</section>display: flex;
align-items: flex-end;
부모/블록 요소의 라인 높이가 인라인 요소의 라인 높이보다 클 경우 인라인 또는 인라인 블록 요소를 블록 수준 요소의 맨 아래에 정렬할 수 있습니다.*
마크업:
<h1 class="alignBtm"><span>I'm at the bottom</span></h1>
css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
* 표준 모드임을 확인
여러 번 문제에 부딪혔고 좋은 해결책이 있지만 좋은 해결책도 아닙니다.플렉스 박스, 그리드 시스템 또는 디스플레이 테이블을 사용하여 다양한 방법으로 이 작업을 수행할 수 있습니다.내가 선호하는 변형은 유연성과 '마진-바닥: 자동'을 혼합한 것이다.다음은 텍스트 하단의 가능성을 개인적으로 모아 놓은 것입니다.
1. 플렉스/마진 톱: 자동;
.parent {
min-height: 200px;
background: green;
display: flex;
}
.child {
margin-top: auto;
background: red;
padding:5px;
color:white;
}<div class="parent">
<div class="child">Bottom text</div>
</div>2. 플렉스 / 얼라인먼트 셀프: 플렉스 엔드
.parent {
display: flex;
min-height: 200px;
background: green;
}
.child {
align-self: flex-end;
background: red;
padding: 5px;
color: white;
}<div class="parent">
<div class="child">Bottom text</div>
</div>3. 플렉스 / 얼라인먼트 아이템 : 플렉스 엔드;
.parent {
min-height: 200px;
background: green;
display: flex;
align-items: flex-end;
}
.child {
padding: 5px;
background: red;
color: white;
}<div class="parent">
<div class="child">Bottom text</div>
</div>4. 그리드/얼라인 셀프: 종료;
.parent {
min-height: 200px;
background: green;
display: grid;
}
.child {
align-self: end;
background: red;
padding:5px;
color:white;
}<div class="parent">
<div class="child">Bottom text</div>
</div>5. 테이블/수직 정렬: 바닥;
개인 나는 식탁에 대한 이 접근 방식을 좋아하지 않는다.
.parent {
min-height: 200px;
background: green;
display: table;
width:100%;
}
.child {
display: table-cell;
vertical-align: bottom;
background: red;
padding:5px;
color:white;
}<div class="parent">
<div class="child">Bottom text</div>
</div>스페이서 포함
6. 유연성; / 유연성: 1;
.parent {
min-height: 200px;
background: green;
display: flex;
flex-flow: column;
}
.spacer {
flex: 1;
}
.child {
padding: 5px;
background: red;
color: white;
}<div class="parent">
<div class="spacer"></div>
<div class="child">Bottom text</div>
</div>7. 플렉스/플렉스 확장: 1;
.parent {
min-height: 200px;
background: green;
display: flex;
flex-direction: column;
}
.spacer {
flex-grow: 1;
}
.child {
padding: 5px;
background: red;
color: white;
}<div class="parent">
<div class="spacer"></div>
<div class="child">Bottom text</div>
</div>8. 인라인 블록 / Pseudo Class : : 이전
.parent {
min-height: 200px;
background: green;
}
.child::before {
display:inline-block;
content:'';
height: 100%;
vertical-align:bottom;
}
.child {
height:200px;
padding: 5px;
background: red;
color: white;
}<div class="parent">
<div class="child">Bottom text</div>
</div>❤️개인적으로 선호하는 버전은 1., 2., 3.
유연성이라는 것을 간단하게 실현할 수 있습니다.
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>다음의 어프로치를 사용할 수 있습니다.
.header-parent {
height: 150px;
display: grid;
}
.header-content {
align-self: end;
}<div class="header-parent">
<h1>Header title</h1>
<div class="header-content">
Header content
</div>
</div>다음은 플렉스 박스를 사용하지만 하단 정렬에는 플렉스 엔드를 사용하지 않는 또 다른 솔루션입니다.이 아이디어는margin-bottomon h1 to auto 나머지 콘텐츠를 아래로 푸시합니다.
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header h1 {
margin-bottom:auto;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>, 하다, 하다, 하다, 하다, 이렇게 할 수도 있어요.margin-top:auto에서는요, 이 에는 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.div ★★★★★★★★★★★★★★★★★」span:
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header span {
margin-top:auto;
}<div id="header">
<h1>Header title</h1>
<span>Header content (one or multiple lines)</span>
</div>div를 맨 아래로 이동하는 가장 좋은 방법은 다음과 같습니다.기본적으로 디스플레이 플렉스와 플렉스 방향을 부모에 대한 열로 설정하고 컨테이너 하단에 플로팅해야 하는 자녀에 '마진 톱: auto'를 추가하는 것이 필요합니다.참고:부트스트랩과 그 클래스를 사용해 왔습니다.
.box-wrapper {
height: 400px;
border: 1px solid #000;
margin: 20px;
display: flex; // added for representation purpose only. Bootstrap default class is already added
flex-direction: column;
}
.link-02 {
margin-top: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrapper d-flex flex-column col-4">
<div>incidunt blanditiis debitis</div>
<div class="news-box">
<img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150">
<p>Labore consectetur doloribus qui ab et qui aut facere quos.</p>
</div>
<a href="https://oscar.com" target="_blank" class="link-02">
This is moved to bottom with minimal effort
</a>
</div>동적 높이 항목이 여러 개 있는 경우 테이블 및 테이블 셀의 CSS 표시 값을 사용합니다.
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
JSBin 데모를 작성했습니다.http://jsbin.com/INOnAkuF/2/edit
또한 데모에서는 동일한 기술을 사용하여 수직으로 중심을 맞추는 예를 보여 줍니다.
이 모든 대답들이 다 먹혀들지 않았어저는 Flexbox 전문가가 아닙니다만, 이것은 꽤 알기 쉬웠습니다.심플하고 이해하기 쉽고 사용하기 쉽기 때문입니다.내용에서 다른 부분을 분리하려면 빈 칸을 삽입하고 빈 칸을 채워 넣으십시오.
https://jsfiddle.net/8sfeLmgd/1/
.myContainer {
display: flex;
height: 250px;
flex-flow: column;
}
.filler {
flex: 1 1;
}
<div class="myContainer">
<div>Top</div>
<div class="filler"></div>
<div>Bottom</div>
</div>
이것은 하단 내용물이 고정 크기가 아닌 경우에도 용기의 크기가 고정 크기가 아닌 경우에도 예상대로 반응합니다.
당신은 이것에 절대+친척이 필요하지 않다.컨테이너와 데이터 모두에 상대 위치를 사용할 수 있습니다.이렇게 하는 거예요.
데이터 높이가 다음과 같이 될 것으로 가정합니다.x컨테이너는 상대적이며 바닥글도 상대적입니다.데이터 추가만 하면 됩니다.
bottom: -webkit-calc(-100% + x);
데이터는 항상 컨테이너의 맨 아래에 있습니다.동적 높이의 컨테이너가 있는 경우에도 작동합니다.
HTML은 이렇게 될 것이다.
<div class="container">
<div class="data"></div>
</div>
CSS는 이렇게 됩니다.
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.data{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
이게 도움이 됐으면 좋겠다.
유연성이 뛰어난 방법이 있습니다.물론 IE8에서는 지원되지 않습니다.사용자가 7년 전에 필요했기 때문입니다.필요한 지원에 따라서는, 이러한 기능 중 일부를 없앨 수 있습니다.
그래도 외부 컨테이너 없이 텍스트를 자체 내에서 정렬할 수 있는 방법이 있다면 좋을 것입니다.
#header {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
}
매우 간단한 한 줄 해법은 모든 div의 텍스트가 아래로 간다는 점을 염두에 두고 div에 행-heigh를 추가하는 것입니다.
CSS:
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML:
<div id="layer">
<a href="#">text at div's bottom.</a>
</div>
이것은 div 내의 텍스트만 내려가고 싶을 때 실용적이고 빠른 해결책입니다.이미지와 다른 것을 조합할 필요가 있는 경우, 조금 더 복잡하고 응답성이 높은 CSS를 코드화할 필요가 있습니다.
언급된 기타 플렉스 박스 솔루션 추가:
사용할 수 있습니다.flex-grow: 1첫 번째 제비에서이렇게 하면 두 번째 div가 아래에 정렬되고 첫 번째 div는 남은 모든 공간을 차지합니다.
부모 div에서 다음을 사용해야 합니다.display: flex그리고.flex-direction: column.
/* parent-wrapper div */
.container {
display: flex;
flex-direction: column;
}
/* first-upper div */
.main {
flex-grow: 1;
}
바이올린 체크: https://jsfiddle.net/1yj3ve05/
콘텐츠의 랩핑 div 높이(다른 사람의 응답에 표시된 #content)를 #content 전체가 아니라 설정할 수 있다면 다음 방법을 시도해 볼 수도 있습니다.
HTML
<div id="header">
<h1>some title</h1>
<div id="header-content">
<span>
first line of header text<br>
second line of header text<br>
third, last line of header text
</span>
</div>
</div>
CSS
#header-content{
height:100px;
}
#header-content::before{
display:inline-block;
content:'';
height:100%;
vertical-align:bottom;
}
#header-content span{
display:inline-block;
}
이 솔루션은 기본 부트스트랩 시작 템플릿을 기반으로 합니다.
/* HTML */
<div class="content_wrapper">
<div class="content_floating">
<h2>HIS This is the header<br>
In Two Rows</h2>
<p>This is a description at the bottom too</p>
</div>
</div>
/* css */
.content_wrapper{
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.content_floating{
display: table-cell;
vertical-align: bottom;
padding-bottom:80px;
}
#header {
height: 150px;
display:flex;
flex-direction:column;
}
.top{
flex: 1;
}
<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
#header {
height: 250px;
display:flex;
flex-direction:column;
background-color:yellow;
}
.top{
flex: 1;
}<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>내가 생각해낸 방법은 지금까지 말한 것보다 훨씬 더 간단하다.
디브그 을 해 .H1을 사용하다
float: left;
padding: 90px 10px 11px
고객을 위한 사이트에서 일하고 있는데, 디자인상 텍스트는 특정 div의 맨 아래에 있어야 합니다.저는 이 두 라인을 사용하여 결과를 얻었고, 잘 작동합니다.또한 텍스트가 확장되어도 패딩은 그대로 유지됩니다.
*{
margin:0;
}
div{
width:300px;
background:cornflowerblue;
color:#fff;
height:150px;
display:flex;
justify-content:space-between;
flex-direction:column;
}<div>
<h4>Heading</h4>
<p>This is a paragraph</p>
<!-- <p> Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</p> -->
</div> 단하 just just just를 쓰면 된다.display:flex ★★★★★★★★★★★★★★★★★」flex-direction:column를 justify-content:space-between부모 div의 키를 자녀 콘텐츠로 정당화해서 목표를 달성할 수 있도록 합니다.이 스니펫을 사용하여 문제를 해결합니다.
관심을 가져주셔서 정말 감사합니다.
사용 방법:
div.myclass { margin-top: 100%; }
수정하기 위해 %를 변경해 보십시오.예: 120% 또는 90%... 등
방금 클라이언트에 대해 한 사이트에서 바닥글 텍스트가 높은 상자라고 요청했고, 맨 아래에 있는 텍스트는 간단한 패딩으로 이 작업을 수행했으며, 모든 브라우저에서 작동해야 합니다.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
효과가 있는 것 같습니다.
#content {
/* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
vertical-align: -@header_height + @content_height;
/* only need it if your content is <div>,
* if it is inline (e.g., <a>) will work without it */
display: inline-block;
}
사용을 줄이면 CSS 퍼즐을 푸는 것이 코드보다 훨씬 더...난 CSS가 너무 좋아파라미터 1개를 변경하는 것만으로 레이아웃 전체를 변경할 수 있는 것은 매우 즐겁습니다.
크로스 브라우저의 완벽한 예는 다음과 같습니다.
http://www.csszengarden.com/?cssfile=/213/213.css&page=0
그 아이디어는 아래에 div를 표시하는 것과 거기에 붙이는 것 둘 다이다.대부분의 경우 간단한 접근으로 스틱 div가 메인 콘텐츠와 함께 위로 스크롤됩니다.
다음으로 완전히 동작하는 최소한의 예를 제시하겠습니다.div 삽입 트릭은 필요하지 않습니다.많은 BR은 스크롤바를 강제로 표시하기 위한 것입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#floater {
background: yellow;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
border-top: 2px solid gold;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="floater"></div>
</body>
</html>
코드가 IE에서 작동하지 않는 것 같으면 상단에 DOSCTYPE 태그를 추가해야 합니다.이것은 IE에서 동작하는 것이 중요합니다.또한 이것이 첫 번째 태그여야 하며 그 위에 아무것도 표시되지 않아야 합니다.
2015년 솔루션
<div style='width:200px; height:60px; border:1px solid red;'>
<table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
<tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
</table>
</div>
http://codepen.io/anon/pen/qERMdx
천만에
언급URL : https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom
'programing' 카테고리의 다른 글
| PowerShell 모듈이 장착되어 있는지 확인하는 방법 (0) | 2023.04.08 |
|---|---|
| 부유 원소의 부모가 무너지지 않게 하려면 어떻게 해야 하나요? (0) | 2023.04.08 |
| Windows PowerShell: 명령 프롬프트 변경 (0) | 2023.04.08 |
| PSCustom Object에서 해시 테이블로 (0) | 2023.04.08 |
| 클러스터된 인덱스 및 비클러스터된 인덱스는 실제로 무엇을 의미합니까? (0) | 2023.04.08 |