반응형
다른 div의 아래쪽 근처에 div 배치
외부 div와 내부 div가 있습니다. 외부 div 하단에 내부 div를 배치해야합니다.
외부 div는 탄력적입니다 (예 : 너비 : 70 %). 또한 내부 블록을 중앙에 배치해야합니다.
설명 된 메이크업의 간단한 모델은 아래 그림에 나와 있습니다.
Firefox 3, Chrome 1 및 IE 6, 7 및 8에서 테스트 및 작업 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
height: 100px; position: relative;'>
Outer
<div style='background-color: green;
position: absolute; left: 0; width: 100%; bottom: 0;'>
<div style='background-color: magenta; width: 100px;
height: 30px; margin: 0 auto; text-align: center'>
Inner
</div>
</div>
</div>
</body>
</html>
라이브 버전 : http://jsfiddle.net/RichieHindle/CresX/
중앙에 배치하려면 하단에 래핑 div가 필요합니다.
<style>
/* making it look like your nice illustration */
#outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
#inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }
/* positioning the boxes correctly */
#outer { position: relative; }
#wrapper { position: absolute; bottom: 3px; width: 100%; }
#inner { margin: 0 auto; }
</style>
<div id="outer">
<div id="wrapper"><div id="inner"></div></div>
</div>
CSS3를 Flexbox사용하면 하단 위치를 매우 쉽게 지정할 수 있습니다. Flexbox 지원 표 확인
HTML
<div class="outer">
<div class="inner">
</div>
</div>
CSS
.outer {
display: flex;
justify-content: center; /* Center content inside */
}
.inner {
align-self: flex-end; /* At the bottom of the parent */
}
산출:
.outer {
background: #F2F2CD;
display: flex;
width: 70%;
height: 200px;
border: 2px solid #C2C2C3;
justify-content: center;
}
.inner {
background: #FF0081;
width: 75px;
height: 50px;
border: 2px solid #810000;
align-self: flex-end;
}<div class="outer">
<div class="inner">
</div>
</div>IE6을 포함한 모든 브라우저에서 잘 작동합니다.
<style>
#outer{
width: 70%;
background-color: #F2F2CC;
border: 1px solid #C0C0C0;
height: 500px;
position: relative;
text-align: center;
}
#inner{
background-color: #FF0080;
border: 1px solid black;
width: 30px;
height: 20px;
/* Position at the bottom */
position: relative;
top: 95%;
/* Center */
margin: 0 auto;
text-align: left;
}
</style>
<div id="outer">
<div id="inner">
</div>
</div>
참고 URL : https://stackoverflow.com/questions/857916/positioning-a-div-near-bottom-side-of-another-div
반응형
'developer tip' 카테고리의 다른 글
| LR, SLR 및 LALR 파서의 차이점은 무엇입니까? (0) | 2020.08.18 |
|---|---|
| git 폴더를 하위 모듈로 소급하여 변환 하시겠습니까? (0) | 2020.08.18 |
| 표시가 테이블 셀로 설정된 요소의 경우 Colspan / Rowspan (0) | 2020.08.18 |
| SpringData REST에서 @OneToMany 하위 리소스 연관 게시 (0) | 2020.08.18 |
| JsonP에 데이터 게시 (0) | 2020.08.18 |