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>

  • 相关阅读:
    20191003 尚硅谷Spring Cloud教学视频
    20190928 On Java8 第二十三章 注解
    C# 输出结果有System.Byte[]
    linux 命令
    用go run命令启动main package中的多个文件
    Docker使用入门
    Go实现mqtt服务
    MongoDB的Go语言驱动注意点
    Go实现发送解析GET与POST请求
    用Go实现RabbitMQ消息收发
  • 原文地址:https://www.cnblogs.com/asyuras/p/922970.html
Copyright © 2011-2022 走看看