해결된 질문
작성
·
185
1
안녕하세요! 레이아웃 강의를 진행하다가 가로로 정렬하는데 두가지 방법이 있다고 말씀해주셨는데, 강의에서는 float으로 진행을 해주셔서 저는 display속성을 inline-block으로 바꿔서 진행하는 방법으로 진행해보았습니다..!
그런데 문제는 전 강의처럼 inline-block으로 설정하고 부모요소인 .box2에 text-align을 center로 변경했을때 float처럼 붙지 않고 두개는 붙고 하나는 다른 줄에 이동해있더라구요...ㅜㅜ
혹시 제가 놓친부분이나 잘못한 부분이 있을까요..? 코드와 사진 첨부하겠습니다!
.container {
border: 1px solid red;
width: 1200px;
margin: auto;
}
header {
background-color: skyblue;
overflow: hidden;
}
header article {
/*공통적인 부분을 넣어주기*/
background-color: gray;
width: 300px;
height: 100px;
}
.logo {
float: left;
}
.navi {
float: right;
}
.box1 {
background-color: yellowgreen;
height: 300px;
}
.box2 {
text-align: center;
background-color: greenyellow;
}
.box2 article {
display: inline-block;
width: 33.333333333%;
height: 300px;
}
.sub1{
background-color: darkgray;
}
.sub2{
background-color: lightgray;
}
.sub3{
background-color: lightslategray;
}
footer {
background-color: skyblue;
height: 100px;
}
답변 1
2
div를 인라인블럭으로 변경하면 float를 주지 않아도 되는 장점은 있지만 div가 인라인블럭이 되면서 오른쪽에 4~5픽셀의 마진이 생깁니다. 곧 정확한 크기로 들어가야 하는 경우에는 div에 margin-left: -5px 이렇게 주셔야 해요.
그런데 정확한 픽셀을 요하는 레이아웃에서는 인라인블록으로 하지 않는게 좋습니다. div를 인라인블록으로 변경해서 쉽게 배치하는 것은 너비의 여유가 있는 경우에 사용하세요.