DIV를 하단 또는 기준선에 정렬
하위 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다양한 높이를 가진 여러 개의를 갖게 될 것이며 기준선 / 하단에 정렬하려면 모두 필요합니다.
다음을 추가해야합니다.
#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
}
Use the CSS display values of table and table-cell:
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;
}
I've created a JSBin demo here: http://jsbin.com/INOnAkuF/2/edit
The demo also has an example how to vertically center align using the same technique.
this works (i only tested ie & 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>
hope that helps.
The answer posted by Y. Shoham (using absolute positioning) seems to be the simplest solution in most cases where the container is a fixed height, but if the parent DIV has to contain multiple DIVs and auto adjust it's height based on dynamic content, then there can be a problem. I needed to have two blocks of dynamic content; one aligned to the top of the container and one to the bottom and although I could get the container to adjust to the size of the top DIV, if the DIV aligned to the bottom was taller, it would not resize the container but would extend outside. The method outlined above by romiem using table style positioning, although a bit more complicated, is more robust in this respect and allowed alignment to the bottom and correct auto height of the container.
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>
I realise this is not a new answer but I wanted to comment on this approach as it lead me to find my solution but as a newbie I was not allowed to comment, only post.
You would probably would have to set the child div to have position: absolute.
Update your child style to
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
position:absolute;
top:207px;
}
An old post but thought i would share an answer for anyone looking. And because when you use absolute things can go wrong. What I would do is
HTML
<div id="parentDiv"></div>
<div class="childDiv"></div>
The Css
parentDiv{
}
childDiv{
height:40px;
margin-top:-20px;
}
And that would just sit that bottom div back up into the parent div. safe for most browsers too
I had something similar and got it to work by effectively adding some padding-top to the child.
I'm sure some of the other answers here would get to the solution, but I couldn't get them to easily work after a lot of time; I instead ended up with the padding-top solution which is elegant in its simplicity, but seems kind of hackish to me (not to mention the pixel value it sets would probably depend on the parent height).
If you are having multiple child Div's inside your parent Div, then you can use vertical-align property something like below :
.Parent div
{
vertical-align : bottom;
}
참고URL : https://stackoverflow.com/questions/2015032/align-divs-to-bottom-or-baseline
'program story' 카테고리의 다른 글
| jquery를 사용하여 라디오에서 이벤트를 클릭하거나 변경하십시오. (0) | 2020.09.18 |
|---|---|
| LINQ 쿼리에서 GROUP BY를 사용하여 MAX 행을 어떻게 얻습니까? (0) | 2020.09.18 |
| 파이썬에서 사전을 어떻게 병합합니까? (0) | 2020.09.18 |
| HTTP POST 요청에 JSON 전달 (0) | 2020.09.18 |
| Clang으로 C ++를 어떻게 컴파일합니까? (0) | 2020.09.18 |