[ css ] 태그의 정렬 ( 테이블과 같이 효과를 얻기 위해 사용하는 css의 종류 : display:inline-block…
본문
두번째 방법 Display:inline-block 을 사용하는 방법
이 방법은 inline-block으로 바뀐 요소에 공백이 생기는 문제가 있다.
그래서 부모에서 font-size:0을 지정해줘야 공백이 사라진다.
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main {
width: 500px;
height: 500px;
border: 1px solid #000;
font-size:0px;
}
.head {
border: 1px dotted #000;
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
box-sizing: border-box
}
.content {
width: 100%;
height: 300px;
box-sizing: border-box;
font-size:0px;
}
.left {
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
height: 300px;
display: inline-block;
text-align: center;
line-height: 300px;
font-size:12px;
}
.cont {
position: relative;
left: -1px;
border: 1px dotted blue;
box-sizing: border-box;
width: 300px;
height: 300px;
display: inline-block;
text-align: center;
line-height: 300px;
font-size:12px;
}
.right {
border: 1px dotted green;
box-sizing: border-box;
width: 100px;
height: 300px;
display: inline-block;
text-align: center;
line-height: 300px;
font-size:12px;
}
.foot {
border: 1px dotted #000;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
box-sizing: border-box;
}
</style>
<div class="main">
<div class="head">header</div>
<div class="content">
<div class="left">left</div>
<div class="cont">content</div>
<div class="right">right</div>
</div>
<div class="foot">footer</div>
</div>
댓글목록 0
등록된 댓글이 없습니다.