제가하고 싶은 것은 다음과 같습니다.
------------------------------------
| ------------- ------------- |
| | 1 | 2 | |
| | | | |
| ------------- ------------- |
| | 3 | 4 | |
| | | | |
| --------------------------- |
------------------------------------
지금까지 시도했습니다.
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#top {
width: 100%;
background-color: red;
height: 15%;
}
#bottom {
width: 100%;
background-color: blue;
height: 85%;
}
.inner {
width: 49%;
height: 49%;
border: 1px solid black;
float: left;
}<div id="top"></div>
<div id="bottom">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>그러나 모든 innerdiv는 왼쪽 정렬됩니다. bottomdiv 내에서 중앙을 가로로 정렬하려면 어떻게 해야합니까?
사용 box-sizing: border-box;하면 테두리가 백분율로 계산되므로 50 %를 사용할 수 있습니다.
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#top {
width: 100%;
background-color: red;
height: 15%;
}
#bottom {
width: 100%;
background-color: blue;
height: 85%;
}
.inner {
width: 50%;
height: 50%;
box-sizing: border-box;
border: 1px solid black;
float: left;
text-align: center;
padding: 16px;
}<div id="top"></div>
<div id="bottom">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다