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>

  • 相关阅读:
    PHP的这些基础知识你应该熟知
    PHP版的猴子选大王算法
    Linux常用命令,面试常考
    PHP中常见的数字掐头去尾操作方法
    永久重定向301与临时重定向302区别
    WordPress子模板继承
    双系统引导设置
    OpenCv
    SpringBoot后端跨域问题
    存储式参数校验
  • 原文地址:https://www.cnblogs.com/asyuras/p/922970.html
Copyright © 2011-2022 走看看