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>

  • 相关阅读:
    分形之城
    【SDOI2011 第2轮 DAY1】消防 树上问题+二分+贪心
    【Usaco Nov08 Gold】玩具 三分+贪心
    分治 复习
    快读板子
    最小线段覆盖 C神奇项链
    比赛经验积累1
    字符串 专题
    界面小项目之W3C
    前端小基础
  • 原文地址:https://www.cnblogs.com/asyuras/p/922970.html
Copyright © 2011-2022 走看看