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

3.레이아웃 - 박스너비 지정

by 인생여희 2016. 11. 2.
반응형






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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.boxA:after    {content: "";
    display: block;
    clear: both}
.box1    { float: left; width: 33.3333% ;
        height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
    
    
    
.box2    {float: left; width: 33.3333% ;
            height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
.box3    {float: left; width: 33.3333%;
                height: 200px;
            border:4px dotted green;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            
}
.box4    { width: 100% ;
            height: 200px;
        border:4px dotted red;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
</style>
</head>
<body>
 
<div class="boxA">
<div class="box1">
BOX1
</div>
 
 
<div class="box2">
BOX2
</div>
 
<div class="box3">
BOX3
</div>
</div>
 
<div class="box4">
BOX4
</div>
 
 
</body>
</html>
 
cs






ㅓ

2



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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.boxA:after    {content: "";
    display: block;
    clear: both}
.box1    { width: 100% ;
        height: 200px;
        border:4px dotted red;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
    
    
    
.box2    {float: left; width: 70% ;
            height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
.box3    {float: left; width: 30%;
                height: 200px;
            border:4px dotted green;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            
}
.box4    { width: 100% ;
            height: 200px;
        border:4px dotted red;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
</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








반응형
저작자표시

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

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

관련글

댓글

티스토리툴바