首页 > 代码库 > table-cell布局
table-cell布局
利用table-cell可以实现宽度自适应布局。
table-cell有一些比较好用的属性，比如垂直居中，自适应高度宽度等，为元素设置table-cell布局之后，元素的margin失效，padding有效，
而且一旦元素设置了float或者absolute，则table-cell也会失效。
table-cell不兼容IE6,7.但是可以通过触发hasLayout来实现近似的效果。
以下可以实现宽度自适应布局：
<div class="wrapper"> <img src="../../img/1.jpg" width="150"> <span class=".table-cell">引语：最近在给学生讲解WEB前端开发的HTML和CSS基本知识， 学生要面对“表单”的制作。我喜欢把“表单”称之为初入前端的人的“恶梦”。不得不说，表单这 个东西在前端开发的时候，问题是相当之多的，从嵌套规则、书写习惯，到浏览器的兼容问题， 有很多需要注意的地方。在此总结一下，以方便开发。</span> </div> .wrapper{background: #FFCCCC;overflow: hidden;zoom:1;min-width:400px;} img{float:left;} .table-cell{ display: table-cell; *display: inline-block; width:3000px; }
table-cell布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。