table-call布局

学习了旭哥的文章总结

等分

  <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-call布局相关推荐

html中利用table进行布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
HTML中的table表格布局
HTML中的table表格布局熟练掌握table表格的布局方法,有利于我们今后设计出更加工整美观的页面,是我们学习HTML必不可少的一部分,下面我将列出table表格的几种常用的方法. 一.tabl ...
html 表格自适应布局,table自适应布局的一些总结
效果工作中遇到的自适应表格,实现过程并不顺畅,花费了一些功夫.将其中不熟悉的技术点总结如下,期待下次可以行云流水的做出来. 自适应表格如何实现文本溢出点点的效果自适应的表格,由于单元格的流动性,文 ...
table传统布局及实例
table来做整体页面的布局,布局的技巧归纳为如下几点: 1.按照设计图的尺寸设置表格的宽高以及单元格的宽高. 2.将表格border.cellpadding.cellspacing全部设置为0 ,表 ...
HTML表div布局,html使用列表以及div的布局和table的布局
标题1 标题2 标题3 标题1 标题2 标题3 标题1 标题2 标题3 标题1 标题2 标题3 标题1 标题2 标题3 标题1 标题2 标题3 标题1 标题2 标题3 标题1 标题2 标题3 标题1 ...
table和div在页面布局上应该注意的问题
在这篇文章开篇,我先纠正一下我之前写的一篇入门文章的错误,还是先引用一下比较官方的说法吧,避免再次误导各位新手 " <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行 ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
ext的另一个table布局的例子
來源:http://hi.baidu.com/yeakyang/blog/item/6f4af10e8bbc9ecd7bcbe1a4.html 周末对ext布局进行了研究,发现以前觉得比较麻烦的东西, ...
html网页 table布局实例,HTML用Table表格对网页布局
HTML是用于开发网页的"超文本标记语言",今天我们一起来学习一下HTML+CSS网页布局中Table布局方式. 常见的网页布局用CSS而言一般有经典行布局.经典列布局.双飞翼布局 ...
刀剑神域动漫网页设计作品学生表格布局网页作业成品 table漫画网站制作 dreamweaver静态HTML学生网页制作模板
刀剑神域动漫网页设计知识点介绍网页制作说明网页代码演示导航代码正文代码网页效果预览成品地址知识点介绍使用dreamweaver制作采用table表格布局.网页背景颜色.底部版权区域 ...

table-call布局

等分

等高布局

多行文字居中

左右布局

图片居中

table-call布局相关推荐

最新文章

热门文章