table-cell实现宽度自适应布局
时间:2022-05-04
本文章向大家介绍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;
}
- RabbitMQ入门-从HelloWorld开始
- RabbitMQ入门-初识RabbitMQ
- 谈谈分布式事务之三: System.Transactions事务详解[下篇]
- 当InternalsVisibleToAttribute特性遭遇"强签名"
- MyBatis-从查询昨天的数据说起
- WCF并发(Concurrency)的本质:同一个服务实例上下文(InstanceContext)同时处理多个服务调用请求
- Spring集成RabbitMQ-必须知道的几个概念
- Spring读书笔记——bean创建(上)
- 15:21爆出的小程序功能升级,你还要对小程序观望吗?
- 如何解决分布式系统中的跨时区问题[原理篇]
- 什么是区块链:块的结构
- Spring读书笔记——bean创建(下)
- 当区块链遇上传统行业 我们的生活和工作会改变吗?
- 如何设计开发好一个 HTTP API?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- GoLang 中发送 email 邮件
- 漫画算法题:两数之和与三数之和
- 推荐系统与深度学习(十七)——DIN模型原理
- 可视化教程开启BERT之旅
- pandas中apply与map的异同
- 终端下双重过滤筛选内容
- scrapy-redis分布式爬虫
- HTML5新增全局属性
- 漫画:如何找到链表的倒数第n个结点?
- 微信小程序使用npm
- Flink SQL 自定义 format
- 在页面离开前提醒你的beforeunload事件
- 忘记MySQL密码怎么办?一招教你搞定!
- 夺冠 or 姜子牙?ChatBot帮你搞定:基于话题引导的对话推荐系统
- 数据处理思想和程序架构: 使用Mbedtls包中的SSL,和服务器进行网络加密通信