admin管理员组

文章数量:1794759

table

table

学习了旭哥的文章总结

等分

  <style>.container {display: table;height: 300px;width: 100%;border: 1px solid red;}.child {display: table-cell;border: 1px solid red;}</style><body><div class="container"><div class="child">1</div><div class="child">2</div><div class="child">3</div><div class="child">4</div><div class="child">5</div><div class="child">6</div></div>
</body>

效果

等高布局

  <style>.list_row {display: table-row;}.list_cell {display: table-cell;width: 30%;padding: 1.6%;background-color: #f5f5f5;}/*中间一个元素背景淡蓝，有别于两边的淡灰色*/.list_center {background-color: #f0f3f9;}</style><body><div class="list_row"><div class="list_cell">对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？我们可以使用“补差等高法”，就是一个一个很大的margin-bottom负值配上一个同样大小的padding-bottom值，本例中为了实例需要，margin-bottom值就百来像素。显然，由于两者原理不同，难免需要用到hack，所以demo完整CSS代码如下：</div><div class="list_cell list_center">对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？</div><div class="list_cell ">对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？</div></div>
</body>

效果

多行文字居中

  <style>.parent {display: table;height: 300px;width: 1000px;border: 1px solid red;}.child {display: table-cell;/* 类似于表格中的单元格 *//* 使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。 */vertical-align: middle;}</style><body><div class="parent"><div class="child">假如我现在有一个div，高度固定，里面有一段文本，差不多跟上面的第二个差不多，但是不知道到底有多少行。如果用第二种方法，并且文本超过了一行，那肯定超出父元素了，如图</div></div>
</body>

左右布局

  <style>.box {width: 60%;margin: 60px auto 0;padding: 20px;background: #f5f5f5;}p {margin: 0;}a img {width: 100px;margin-right: 10px;float: left;}.content {display: table-cell;/* *display: inline-block; */}</style><body><div class="box f9 fix"><a class="l mr10"><img src="./images/1.jpg" /></a><div class="content"><p><a></a>大美女一枚</a> 来自上海</p><p class="mt5">签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。</p><p class="mt5">微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍药太水还是房子质量太好？</p></div></div>

注意：设置display: table-cell;后消除BFC同时，不会像inline-block和absolute效果一样

图片居中

  <style>ul {list-style: none;}.zxx_align_box_4 div {background-color: red;display: table-cell;width: 144px;height: 144px;line-height: 1.14;text-align: center;vertical-align: middle;}.zxx_align_box_4 div img {height: 134px;vertical-align: middle;}</style>
<body><ul class="zxx_align_box_4 fix"><div><img src="./images/1.jpg" /></div></ul>
</body>

效果

 

本文标签： Table

版权声明：本文标题：table 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1693453029a263871.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。