<html>
<body>
<style type="text/css">
.tb_input {
display: table-cell;
width: 100%;
max-width: 100% !important;
}
</style>
<div style="display: table; width: 100%">
<div style="display:table-cell;border:1px solid;width: 50%;height: 100vh">
<div style="display: block; width: 368px; padding: 40px 0px 60px 0px; margin-left: auto; margin-right: auto">
<div style="width: 368px; display: block; background: #f4f4f4">
<div style="display: block; padding: 20px 0px 0px 20px">Email</div>
<div style="display: block; padding: 0px 15px 0px 15px">
<input name="ctl00$MainContent$Email" type="email" id="MainContent_Email" class="tb_input" />
</div>
</div>
</div>
<div style="display: block; width:300px;position: absolute;bottom: 0;margin-left:auto; margin-right:auto ">
<p style=" width: 200px;">footer</p>
</div>
</div>
<div style="width: 50%;">
</div>
</div>
</body>
</html>위의 HTML 코드는 전체 공간을 왼쪽과 오른쪽으로 분할하여 왼쪽에 배치했습니다. 이제 유일한 문제는 바닥 글이 왼쪽 중간에 들어 가지 않는다는 것입니다. 뭐가 잘못 됐나요?
자식이 absolute 일 때 부모에 대한 상대적 위치를 설정하지 않았습니다 . 또한, 당신은 규칙을 놓친 및 에 대한 절대 블록 ... 등divright: 0bottom: 0
또한, 나는 설정 text-align: center, margin-left: auto및 margin-right: auto태그 <p>.
이것을 사용하십시오.
<html>
<body>
<style type="text/css">
.tb_input {
display: table-cell;
width: 100%;
max-width: 100% !important;
}
</style>
<div style="display: table; width: 100%;">
<div style="display: table-cell; border: 1px solid; width: 50%; height: 100vh; position: relative;">
<div style="display: block; width: 368px; padding: 40px 0px 60px 0px; margin-left: auto; margin-right: auto;">
<div style="width: 368px; display: block; background: #f4f4f4;">
<div style="display: block; padding: 20px 0px 0px 20px;">Email</div>
<div style="display: block; padding: 0px 15px 0px 15px;">
<input name="ctl00$MainContent$Email" type="email" id="MainContent_Email" class="tb_input" />
</div>
</div>
</div>
<div style="display: block; width: 100%; position: absolute; bottom: 0; right: 0;">
<p style="width: 200px; text-align: center; margin-left: auto; margin-right: auto;">footer</p>
</div>
</div>
<div style="width: 50%;"></div>
</div>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다