zoukankan      html  css  js  c++  java
  • 用css+div实现表格的每行显示3列的功能

    转自网络

    方案一:
    <style type="text/css">
    .csstb{font-size:12px;600px;}
    .csstb div,
    .csstb li{
    float:left;
    198px;
    line-height:20px;/*行高*/
    border:#999 solid 1px;}
    .csstb ul{margin:0;padding:0;list-style:none;}
    </style>

    <div class="csstb">
    <div>第1行第1列</div>
    <div>第1行第2列</div>
    <div>第1行第3列</div>
    <div>第2行第1列</div>
    <div>第2行第2列</div>
    <div>第2行第3列</div>
    <div>第3行第1列</div>
    <div>第3行第2列</div>
    <div>第3行第3列</div>
    </div>
    <br />
    上面这样DIV有点不知道是什么感觉,本身DIV是一个结构,这样的结构我觉得不好<br />
    下面是修改过的用LI列表,其实一样的
    <br />

    <div class="csstb">
    <ul>
    <li>第1行第1列</li>
    <li>第1行第2列</li>
    <li>第1行第3列</li>
    <li>第2行第1列</li>
    <li>第2行第2列</li>
    <li>第2行第3列</li>
    <li>第3行第1列</li>
    <li>第3行第2列</li>
    <li>第3行第3列</li>
    </ul>
    </div>

    方案二:

    <style type="text/css">
    #d1 span{ 197px; height:18px; float:left; border:solid 1px blue;}
    </style>

    <div style="600px; height:60" id="d1">
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    </div>

  • 相关阅读:
    Fragment练习
    view有了父元素就不能再添加父元素
    margin与padding的不同
    BroadcastReceiver组件
    史上最著名的10个思想实验[转]

    godaddy域名空间购买波折
    碎片2
    程序员要多喝水
    google.com的首页换上了pc man游戏
  • 原文地址:https://www.cnblogs.com/asyuras/p/922970.html
Copyright © 2011-2022 走看看