CSS Float
업데이트:
정렬
- 보통 같운데 가운데 정렬이나 오른쪽 정렬등은 태그의 text-align 사용해서 정렬함.
- 세로 정렬이 어려움 보통 아래의 코드를 활용해서 정렬을 많이함
(IE에서는 문제있음)@css display: flex; align-items: center;Float
- 뜨다라는 사전적 의미와 같이, 이미지를 띄워서 화면을 정렬해줄 때 주로 사용함
- 요즘에는 레이아웃 용으로 많이 이용됨.
-
태그를 float 속성 및 width,height 속성 등을 이용해 레이아웃 배치
<html>
<head>
<style>
.ex-layout{ height: 310px }
.menu{
width: 300px;
height: 40px;
border: 2px solid #09c;
background-color: #d7f5ff;
}
.main .left-menu{
float: left;
width: 50px;
height: 254px;
border: 2px solid red;
background-color: #ffe7d5;
}
.main .content{
float: left;
width: 250px;
height: 250px;
}
.main .content .article{
height: 200px;
border: 2px solid blue;
background-color: #e2e9ff;
}
.main .content .comment{
height: 50px;
border: 2px solid purple;
background-color: #ffddff;
}
</style>
</head>
<body>
<div class="ex-layout">
<div class="menu">global menu</div>
<div class="main">
<div class="left-menu">left menu</div>
<div class="content">
<div class="article">article</div>
<div class="comment">comment</div>
</div>
</div>
</div>
</body>
</html>
