티스토리 뷰
참고 : https://www.youtube.com/watch?v=RthnACwgqr8
방법 1
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display : table;
width : 100%
}
.main,
.side {
font-size : 30px;
text-align : center;
height :300px;
color : #fff;
line-height : 300px;
display : table-cell;
}
.main {
background-color : dodgerblue;
}
.side {
background-color : crimson;
width : 300px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">main</div>
<div class="side">side</div>
</div>
</body>
</html>방법 2
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {}
.main,
.side {
font-size : 30px;
text-align : center;
height :300px;
color : #fff;
line-height : 300px;
float: left
}
.main {
background-color : dodgerblue;
width : calc(100% - 300px);
/* Vender Prefix */
width: -webkit-calc(100%- 300px);
width: -moz-calc(100%- 300px);
width: -0-calc(100%- 300px);
width: -ms-calc(100%- 300px);
}
.side {
background-color : crimson;
width : 300px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">main</div>
<div class="side">side</div>
</div>
</body>
</html>'웹표준' 카테고리의 다른 글
| CSS로 이미지 세로 중앙 정렬 방법 및 샘플 이미지 적용 (0) | 2020.04.10 |
|---|---|
| 부트스트랩 modal 에서 내용 부분만 스크롤 기능 하기 (2) | 2019.04.30 |
| 테이블 자체를 중앙정렬(가운데) 하기 (0) | 2019.03.20 |
| 버튼 샘플 (0) | 2018.01.25 |
| html5 무료 기초 강의 사이트 (0) | 2015.06.30 |