zoukankan      html  css  js  c++  java
  • 模拟表格 inline-block等高布局

    表格是个好东西,它可以自动根据内容来调整格子,确保数据正常显示,并且不破坏表格的结构。但也有一些劣势,因为是用大量标签堆砌而成,页面结构会比较乱,细节也往往不容易控制。所以我们希望有表格的展示效果,但不想用表格,于是就有了模拟表格。
      对于HTML中的同级数据,我们更希望把它们放到一起。所以UL、LI的结构可以满足需求,UL就是整个表格,LI就是我们的单元格。对LI元素设置display:inline-block,让其并行排列。然后要让元素像表格一样就需要设置适当的宽度,比如下面的例子使用33.33%,也就是每行显示3个单元格。注意还需要同时将box-sizing设置为border-box,因为我们可能需要边框或padding之类的东西,且不能影响到整个单元格的宽度。最后使用等高布局,对元素设置上很大数值的padding-bottom和负margin-bottom,让单元格的高度超过行盒子,为了让水平边框不因为单元格高度不等而参差不齐。这样,整个布局就完成了。它有点类似表格,内容可以撑开单元格高度。对于要确保数据显示却不想用表格布局的场景可以考虑使用它。

    运行<style>
    ul {
      width
    :260px;overflow:hidden;
      border-right
    :1px solid #CCC;
      border-bottom
    :1px solid #CCC;
      margin
    :0px;padding:0px;
      font-size
    :0px;
    }
    li {
      box-sizing
    :border-box;
      width
    :33.33%;
      display
    :inline-block;
      vertical-align
    :top;
      padding-bottom
    :999px;
      margin-bottom
    :-999px;
      border-left
    :1px solid #CCC;
      border-top
    :1px solid #CCC;
      font
    :14px/1.75 Simsun;
    }
    </style>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>无论单个格子里面有多少文字,即使换行也不会影响整个布局。</li>
      <li></li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>

  • 相关阅读:
    文件内容排名算法,输入排名函数,返回排名后的文件名
    线段树做大数据排序
    给字符排序-基类排序二分查找-JavaScript
    后缀数组、名次数组-JavaScript
    二分查找法、二分去重排序法,返回最接近的位置和实际位置
    用四叉树对图像分类,获取tag和key
    Linux显示所在Git分支
    Linux中设置Git显示颜色
    屏蔽网页广告
    tf.add_to_collection,tf.get_collection简介
  • 原文地址:https://www.cnblogs.com/axl234/p/3904875.html
Copyright © 2011-2022 走看看