前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

不用table,怎么等分DIV

css3

在SF上,有人提出一个问题:不用table,如何把Div分成3行*3列。提供了三种思路:

第一种方式

html:


    1. <div id="box">
    2. <div>
    3. <span>1</span>
    4. <span>2</span>
    5. <span>3</span>
    6. </div>
    7. <div>
    8. <span>4</span>
    9. <span>5</span>
    10. <span>6</span>
    11. </div>
    12. <div>
    13. <span>7</span>
    14. <span>8</span>
    15. <span>9</span>
    16. </div>
    17. </div>

csss:


    1. *{
    2. margin:0 auto;
    3. padding:0;
    4. }
    5. #box{
    6. height:200px;
    7. width:200px;
    8. border:1px solid red;
    9. }
    10. div div{
    11. width:100%;
    12. height:32.855%;
    13. }
    14. span{
    15. display:inline-block;
    16. height:100%;
    17. width:32%;
    18. border:1px solid blue;
    19. }
    20. #box span:nth-child(2n+2){
    21. border:1px solid red;
    22. margin-left:-7px;
    23. }
    24. #box span:nth-child(2n+3){
    25. border:1px solid green;
    26. margin-left:-7px;
    27. }

第二种方式

可以考虑display的table、table-row和table-cell属性 
html:


    1. <div id="box">
    2. <div>
    3. <span>1</span>
    4. <span>2</span>
    5. <span>3</span>
    6. </div>
    7. <div>
    8. <span>4</span>
    9. <span>5</span>
    10. <span>6</span>
    11. </div>
    12. <div>
    13. <span>7</span>
    14. <span>8</span>
    15. <span>9</span>
    16. </div>
    17. </div>

css:


    1. *{
    2. margin:0 auto;
    3. padding:0;
    4. }
    5. #box{
    6. height:200px;
    7. width:200px;
    8. border:1px solid red;
    9. display:table;
    10. }
    11. div div{
    12. width:100%;
    13. display:table-row;
    14. }
    15. span{
    16. display:table-cell;
    17. border:1px solid blue;
    18. vertical-align:middle;
    19. text-align:center;
    20. }

第三种方式

利用css3的column-count布局 
html:


    1. <div id="box">
    2. <div id="first">
    3. 人民网北京2月24日电 (记者 刘阳)国家发展改革委知,
    4. </div>
    5. <div>
    6. 人民网北京2月24日电 (记者 刘阳)国家发展改革委知,
    7. </div>
    8. <div>
    9. 人民网北京2月24日电 (记者 刘阳)国家发展改革委知,
    10. </div>
    11. </div>

css


    1. *{
    2. margin:0 auto;
    3. padding:0;
    4. }
    5. #box{
    6. height:200px;
    7. width:200px;
    8. border:1px solid red;
    9. }
    10. #box>div{
    11. width:100%;
    12. height:32.855%;
    13. border:1px solid blue;
    14. -moz-column-count:3; /* Firefox */
    15. -webkit-column-count:3; /* Safari and Chrome */
    16. column-count:3;
    17.  
    18. -moz-column-rule:4px outset #ff0000; /* Firefox */
    19. -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
    20. column-rule:4px outset #ff0000;
    21. }
    22. #first{
    23.  
    24. }

但要注意的是,使用列布局时,其包含的内容本身的宽度必读大于等于容器宽度,在大于容器宽度时,会自行增加列数。

 


转载请注明:前端录»不用table,怎么等分DIV