본문 바로가기
매일코딩/HTML&CSS3

2.레이아웃 - 박스가로정렬

by 인생여희 2016. 11. 1.
반응형
1. 
1. float를 left로 지정하면 박스는 자신이 가진 너비만큼 차지하며 순서대로 왼쪽에 붙어 위치를 잡는다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.box1{border:4px solid green; line-height: 200px;}
.box2{border:4px solid green; line-height: 200px; float:left}
.box3{border:4px solid green; line-height: 200px; float:left}
.box4{border:4px solid green; line-height: 200px;}
.boxA{border:4px solid RED; line-height: 200px;}
 
</style>
 
</head>
 
<body>
 
<div class="box1" >
BOX1
</div>
 
<div class="boxA">
 
 
<div class="box2">
BOX2
</div>
 
<div class="box3">
BOX3
</div>
 
</div>
 
<div class="box4">
BOX4
</div>
 
 
</body>
</html>
 
 
 
 
 
 
cs





2. clearfix 라고 하면 float을 지정한 요소가 이후의 요소에게 영향을 주지 않는다.






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.box1{border:4px solid green; line-height: 200px;}
.box2{border:4px solid green; line-height: 200px; float:left}
.box3{border:4px solid green; line-height: 200px; float:left}
.box4{border:4px solid green; line-height: 200px;}
.boxA:after{border:4px solid RED; line-height: 200px; content:""; display:block; clear:both}
 
</style>
 
</head>
 
<body>
 
<div class="box1" >
BOX1
</div>
 
<div class="boxA">
 
 
<div class="box2">
BOX2
</div>
 
<div class="box3">
BOX3
</div>
 
</div>
 
<div class="box4">
BOX4
</div>
 
 
</body>
</html>
 
 
 
 
 
 
cs




3. 간단하게 박스의 너비를 지정해 준다.






1
2
3
4
5
6
7
8
9
10
11
<style>
.box1{border:4px solid green; line-height: 200px;}
.box2{border:4px solid green; line-height: 200px; float:left; width:49.5%}
.box3{border:4px solid green; line-height: 200px; float:left; width:49.5%}
.box4{border:4px solid green; line-height: 200px;}
.boxA:after{border:4px solid RED; line-height: 200px; content:""; display:block; clear:both}
 
</style>
cs




반응형
저작자표시

'매일코딩 > HTML&CSS3' 카테고리의 다른 글

5.레이아웃 - 박스너비 고정하기  (0) 2016.11.02
4.레이아웃 - 칼럼 탈락 현상  (0) 2016.11.02
3.레이아웃 - 박스너비 지정  (0) 2016.11.02
3.레이아웃 - 가로 정렬할 박스의 개수 변경  (0) 2016.11.01
1.레이아웃 - 박스정렬  (0) 2016.11.01

관련글

댓글

티스토리툴바