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;
        }    

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

jquery基础选择器

这里的基础用法和css的选取方式一致,对于css选择器熟悉的朋友这里使用简直小意思,下面几篇博文我们来详谈jq的高级选择器!

812
来自专栏彭湖湾的编程世界

【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: ? 也可能是多行的: ? ...

3178
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十四)不常用但是很有用的两个属性:clipToPadding 和 clipChildren

1362
来自专栏前端说吧

css布局 - 垂直居中布局的一百种实现方式(更新中...)

1. line-height行高简单粗暴实现法:line-height:Npx(N = 与元素高度相同的值)

4391
来自专栏腾讯IVWEB团队的专栏

为元素添加边框,你有多少种好办法?

相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标 hover 到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局...

1790
来自专栏淡定的博客

html5之自定义视频播放器

6772
来自专栏十月梦想

移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

1363
来自专栏杨龙飞前端

前端命名规范化

1656
来自专栏别先生

HTML+CSS小实战案例

HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 1 <html> 2 <head...

6499
来自专栏前端新视界

两个 viewports 的故事-第二部分

原文:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素...

1997

扫码关注云+社区

领取腾讯云代金券