하위 div 태그를 상위 div 태그의 하단 또는 기준선에 정렬하려고합니다.
내가 원하는 것은 부모 Div의 기준선에 자식 Div를 두는 것뿐입니다. 지금은 다음과 같습니다.
HTML
<div id="parentDiv">
<div class="childDiv"></div>
</div>CSS
#parentDiv
{
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
}노트
childDiv다양한 높이를 가진 여러 개의를 갖게 될 것이며 기준선 / 하단에 정렬하려면 모두 필요합니다.
absolute부모에 따라 위치 지정 을 사용해야합니다 .
답변:
다음을 추가해야합니다.
#parentDiv {
position: relative;
}
#parentDiv .childDiv {
position: absolute;
bottom: 0;
left: 0;
}absolute요소를 선언 할 때 그렇지 않은 가장 가까운 부모에 따라 배치됩니다 static( absolute, relative또는 여야 함 fixed).
7 년이 지난 후에도 수직 정렬에 대한 검색은 여전히이 질문을 불러 일으키므로 현재 사용할 수있는 또 다른 솔루션 인 flexbox 위치 지정을 게시하겠습니다. display:flex; justify-content: flex-end; flex-direction: column상위 div에 설정하기 만하면됩니다 (이 바이올린 에서도 설명 됨).
#parentDiv
{
display: flex;
justify-content: flex-end;
flex-direction: column;
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}align-items: flex-start;항목을 strech하지 않으려면 사용하십시오 .
표 및 표 셀의 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
데모에는 동일한 기술을 사용하여 수직으로 중앙 정렬하는 방법의 예도 있습니다.
이것은 작동합니다 (나는 단지 테스트했습니다 & ff) :
<html>
<head>
<style type="text/css">
#parent {
height: 300px;
width: 300px;
background-color: #ccc;
border: 1px solid red;
position: relative;
}
#child {
height: 100px;
width: 30px;
background-color: #eee;
border: 1px solid green;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="parent">parent
<div id="child">child</div>
</div>
outside
</body>
</html>도움이 되길 바랍니다.
Y. Shoham이 게시 한 답변 (절대 위치 지정 사용)은 컨테이너가 고정 된 높이 인 대부분의 경우 가장 간단한 솔루션 인 것처럼 보이지만 상위 DIV가 여러 DIV를 포함하고 동적 콘텐츠를 기반으로 높이를 자동 조정해야하는 경우 문제가있을 수 있습니다. 두 블록의 동적 콘텐츠가 필요했습니다. 하나는 컨테이너 상단에 정렬되고 다른 하나는 하단에 정렬되며 컨테이너를 상단 DIV의 크기에 맞게 조정할 수 있지만 하단에 정렬 된 DIV가 더 크면 컨테이너의 크기를 조정하지 않고 바깥쪽으로 확장합니다. . 테이블 스타일 포지셔닝을 사용하여 위에서 설명한 방법은 조금 더 복잡하지만이 점에서 더 견고하며 컨테이너의 바닥에 대한 정렬과 올바른 자동 높이를 허용합니다.
CSS
#container {
display: table;
height: auto;
}
#top {
display: table-cell;
width:50%;
height: 100%;
}
#bottom {
display: table-cell;
width:50%;
vertical-align: bottom;
height: 100%;
}HTML
<div id=“container”>
<div id=“top”>Dynamic content aligned to top of #container</div>
<div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>
나는 이것이 새로운 대답이 아니라는 것을 알고 있지만 내 해결책을 찾기 위해이 접근 방식에 대해 언급하고 싶었지만 초보자로서 나는 논평 할 수 없었고 게시 만 허용했습니다.
아마도 자식 div를 설정해야 할 것입니다 position: absolute.
자녀 스타일을 다음으로 업데이트하십시오.
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
position:absolute;
top:207px;
}오래된 게시물이지만 찾는 사람에게 대답을 공유 할 것이라고 생각했습니다. 그리고 사용할 때 absolute일이 잘못 될 수 있기 때문 입니다. 내가 할 것은
HTML
<div id="parentDiv"></div>
<div class="childDiv"></div>CSS
parentDiv{
}
childDiv{
height:40px;
margin-top:-20px;
}그러면 하위 div가 상위 div에 백업됩니다. 대부분의 브라우저에서도 안전합니다.
td {
height: 150px;
width: 150px;
text-align: center;
}
b {
border: 1px solid black;
}
.child-2 {
vertical-align: bottom;
}
.child-3 {
vertical-align: top;
}<table border=1>
<tr>
<td class="child-1">
<b>child 1</b>
</td>
<td class="child-2">
<b>child 2</b>
</td>
<td class="child-3">
<b>child 3</b>
</td>
</tr>
</table>이것은 내 해결책입니다