[ css ] 태그의 정렬 ( 테이블과 같이 효과를 얻기 위해 사용하는 css의 종류 : display:inline-block ) > html&css

두번째 방법 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 비추천0