专栏首页前端杂货铺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;
        }    

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 响应式web布局中iframe的自适应

    困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

    欲休
  • 定位浮动拾遗

    ---恢复内容开始--- 浮动元素处在正常文档流上的浮动流上,浮动元素的渲染方式很特殊,首先按照正常文档流进行布局,然后将该元素从 文档流中取出并对该元素尽量向...

    欲休
  • 样式化加载失败的图片

    本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅 加载失败的图片是比较丑陋的,比如 但是我...

    欲休
  • 处于UITableView中心线cell的处理

    且行且珍惜_iOS
  • 快速学习POI-模板打印

    自定义生成Excel报表文件还是有很多不尽如意的地方,特别是针对复杂报表头,单元格样式,字体等操作。手写这些代码不仅费时费力,有时候效果还不太理想。那怎么样才能...

    cwl_java
  • 快速学习POI-POI报表导出

    cwl_java
  • SaaS-百万数据报表导出

    基于XSSFWork导出Excel报表,是通过将所有单元格对象保存到内存中,当所有的Excel单元格全部创建完成之后一次性写入到Excel并导出。当百万数据级别...

    cwl_java
  • iOS开发-UITableViewCell的创建方式

    被static修饰的成员变量,全局只有一份内存 static的后面只可以放一个定值,这是在编译阶段就确定的

    雷潮
  • iOS 9 Storyboard 教程(一下)

    你可以直接从storyboard编辑器中,使用原型cell你可以很容易的为你的tableViewCell设计一套自定义的布局.

    hrscy
  • 在iOS中怎样创建可展开的Table View?(上)

    几乎所有的app都有一个共同特征,它们向用户提供了多个视图控制器来导航和工作.这些视图控制器可以用在很多方面,例如,简单地显示某种信息在屏幕上,或者从用户的输入...

    hrscy

扫码关注云+社区

领取腾讯云代金券