This document discusses different techniques for laying out page elements in CSS, including using floats, table-cell display, and inline-block display. It compares fixing widths on outer columns versus inner columns, and explores issues like margin collapsing. The goal is to find effective ways to create common multi-column page layout patterns for navigation, content, and sidebars without unnecessary markup or styles.

1. ?!
1

2. ?!
1

3.
2

4. 3

5. 4

6. 5

7. 6

8. 6

9. 7

10. 7

11. 8

12. 8

15. 10

16. 10

17. 11

18. 12

19. 12

20. 13
.NET
MVC
typescript
SVNgit
JAVA
php
CoffeeScript
angular.js
jQuery
Grunt
Gulp

21. PrototypeWireframe UI style
14

22. 15

23. 15

24. 16

25. 16

26. 16

27. 17

28. 18

29. 19

30. 20

31. Tab 1st Level
21

32. Tab 2nd Level
Tab 1st Level
22

33. 23

34. 24
overwrite KENDO UI

35. 25

36. 26

37. 27

38. 28

39. 29

40. 30

41. http://id.desbear.com/Gcss/beta/template/index.html
31

42. 32

43. 33

44. 34

45. 35

46. 36

47. .wrapper
.nav
include ap-layout
.list
include ap-layout
.detail
include ap-layout
.nav, .list, .detail{
position: absolute;
top:0;
bottom:0;
}
.nav{
width:$nav-width;
left:0;
}
.list{
left:$l-nav;
width: $list-width;
}
.detail{
left: $nav-width +
$list-width;
right:0;
}
.nav .list .detail
37

48. .ap-head
…
.ap-body
…
.ap-foot
…
[class^=“ap-”]{
position: absolute;
left:0;
right:0;
}
.ap-head{
top:0;
height: $ap-head-height;
}
.ap-foot{
bottom:0;
height:$ap-foot-height;
}
.ap-body{
top: $ap-head-height;
bottom: $ap-foot-height;
overflow: auto;
}
.list
.ap-head
.ap-body
.ap-foot
38

49. 39

50. 40

51.
41

52. 42

53. fixed-width fluid-width fixed-width
43

54. How?
.col-left .col-center .col-right
44

55. .group
.col-left
.col-right
.col-center
.col-left{
float:left;
width:$left-width;
}
.col-right{
float:right;
width:$right-width;
}
.col-center{
margin-right:$right-width;
margin-left:$left-width;
}
.col-left .col-center .col-right
Float?
45

56. .group
.col-left
.col-right
.col-center
Float?
.col-left .col-center .col-right
46

57. .table
.col-left
.col-center
.col-right
.table{
display:table;
width:100%;
>[class^=“col-”]{
display:table-cell;
}
}
.col-left{width:$left-width;}
.col-right{width:$right-width;}
.col-left .col-center .col-right
Table-cell?
47

58. Table-cell?
.col-left .col-center .col-right
.table
.col-left
.col-center
.col-right
48

59. .col-left
49

60. .table
.col-left
.col-left-inner
.col-center
.col-right
.col-right-inner
.table{
display:table;
width:100%;
> [class^=“col-”]{
display:table-cell;
}
}
.col-left-inner{width:$left-width;}
.col-right-inner{width:$right-width;}
.col-left .col-center .col-right
Table-cell’s better way
.col-left-inner
.col-right-
inner
50

61. .inline-cloum
.col-left
.col-center
.col-center-inner
.col-right
.inline-cloum > [class^=“col-”]{
display:inline-block;
}
.col-left{width: $left-width;}
.col-right{width: $right-width;}
.col-center{
width: 100%;
margin-left: -$left-width;
margin-right: -$right-width;
}
.col-center-inner{
margin-left: $left-width;
margin-right: $right-width;
}
inline-block?
.col-left .col-center .col-right
.col-center-inner
51

62. .inline-cloum
.col-left
.col-center
.col-center-inner
.col-right
.col-left .col-center .col-right
.col-center-inner
inline-block?
52

63. 53

64. Neil
Evan
Woody
Cjie
54

65. 55