coeure 씨를 인용 3 컬럼을 만드는 방법
base-3column.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>はじめてのホームページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
ここにはヘッダーが入ります
</div>
<div class="main">
<div class="main-contents">
メインコンテンツ
</div>
<div class="right-navi">
右側のカラム
</div>
</div>
<div class="left-navi">
左側のカラム
</div>
<div class="footer">
ここにはフッターメニューが入ります
</div>
</body>
</html>
3column.css
body{
background-color: lightyellow;
}
.header {
height: 150px;
background-color: yellow;
}
.footer{
height: 200px;
background: black;
color: #fff;
clear: both;
}
.main-contents, .left-navi, .right-navi {
height: 400px;
}
.main-contents {
background-color: red;
color: #fff;
float: left;
width: 80%;
}
.left-navi {
background-color: blue;
color: #fff;
width: 20%;
float: right;
}
.right-navi {
background-color: green;
color: #fff;
float: right;
width: 20%;
}
.main{
width: 80%;
float: right;
}
마침내 할 수 있었다!
Reference
이 문제에 관하여(coeure 씨를 인용 3 컬럼을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shin_santa_claus_mikawa/items/fe73798747bea0fc135f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
