div 實作表格布局

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

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>style</code><code>&gt;</code>

<code>    </code><code>div.table{</code>

<code>        </code><code>font-size:0;</code>

<code>        </code><code>width:400px;</code>

<code>        </code><code>border-top-style: solid;</code>

<code>        </code><code>border-top-width: 1px;</code>

<code>        </code><code>border-left-style: solid;</code>

<code>        </code><code>border-left-width: 1px;</code>

<code>        </code><code>margin:0 auto;</code>

<code>    </code><code>}</code>

<code>    </code><code>div.table&gt;div&gt;div{</code>

<code>        </code><code>font-size:18;</code>

<code>        </code><code>border-right-width: 1px;</code>

<code>        </code><code>border-right-style: solid;</code>

<code>        </code><code>border-bottom-width: 1px;</code>

<code>        </code><code>border-bottom-style: solid;</code>

<code>        </code><code>width:199px;</code>

<code>        </code><code>display:inline-block;</code>

<code>        </code><code>margin:0px;</code>

<code>        </code><code>padding:0px;</code>

<code>        </code><code>text-align: center;</code>

<code>    </code><code>div.table&gt;div:first-child{</code>

<code>        </code><code>background-color:pink;</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"table"</code> <code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;ID&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;Name&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;001&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;xiaohong&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;002&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;003&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;004&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>div</code><code>&gt;005&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

<code></code>

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1659342