前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >table-cell实现宽度自适应布局

table-cell实现宽度自适应布局

作者头像
欲休
发布2018-03-15 13:17:36
2K0
发布2018-03-15 13:17:36
举报

利用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;
        }    
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档