使用display:table实现两列自适应布局
在张鑫旭大神那边看到的方法，我自己写了一遍，稍微添加了一些自己的风格特色。
IE6/7不支持这个属性，从IE8开始支持这个属性，对于IE6/7可以用display:inline-block解决。
table-cell同样会被其他一些css属性破坏，栗如：float和position:absolute。设置了table-cell的元素对宽度高度敏感，对margin值没有反应，响应padding属性。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 60%;
margin: 60px auto 0;
padding: 20px;
background: #f5f5f5;
} .clearfix:after {
display: block;
content: '.';
clear: both;
height: 0;
visibility: hidden;
} .head_img {
float: left;
margin-right: 10px;
width: 100px;
height: 100px;
} .head_img img {
width: 100%;
height: 100%;
border: 0;
} .content {
display: table-cell;
*display: inline-block;
}
</style>
</head>
<body>
<div class="box clearfix">
<a href="javascript:;" class="head_img"><img src="data:images/sunny.jpg"/></a>
<div class="content">
<p><a href="javascript:;">winter</a> 来自挪威</p>
<p>签名：晴天。</p>
<p>
微博：故事的小黄花 从出生那年就飘着<br/>
童年的荡秋千 随记忆一直晃到现在<br/>
Re So So Si Do Si La<br/>
So La Si Si Si Si La Si La So<br/>
吹着前奏 望着天空<br/>
我想起花瓣 试着掉落<br/>
为你翘课的那一天<br/>
花落的那一天<br/>
教室的那一间 我怎么看不见<br/>
消失的下雨天 我好想再淋一遍<br/>
没想到 失去的勇气我还留着<br/>
好想再问一遍 你会等待还是离开<br/>
</p>
</div>
</div>
</body>
</html>
效果图：
欢迎指正，谢谢！
使用display:table实现两列自适应布局的更多相关文章
- css 两列自适应布局的4种思路
前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...
- css两列自适应布局的多种实现方式及原理。
两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="mai ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- CSS两列及三列自适应布局方法整理
布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...
- html 三列布局（两列自适应，一列固定宽度）
不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...
- 使用display:table使两栏布局高度相等
两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? <!DOCTYPE html> <html> <head> <meta charse ...
- css布局 - 两栏自适应布局的几种实现方法汇总
这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...
- ch8 基于浮动的布局（两列浮动布局、三列浮动布局）
CSS布局技术的根本是3个基本概念:定位.浮动.外边距操纵. 只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动.因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围他们的块框产生任何影响 ...
随机推荐
- 20190710记录：去掉中转图，直接以1280*1024进行反坐标计算，填补pbFinal。
1.记录:去掉中转图,直接以1280*1024进行反坐标计算.pbFinal=1280*1024. // Imagejoint.cpp : 定义控制台应用程序的入口点. // #include &qu ...
- kotlin数据解构
fun main(arg: Array<String>) { val person = person("tom") var (name) = person//解构 pr ...
- PHP mysql_num_rows() 函数 返回结果集中行的数目。
定义和用法 mysql_num_rows() 函数返回结果集中行的数目. 语法 mysql_num_rows(data) 参数 描述 data 必需.结果集.该结果集从 mysql_query() 的 ...
- 多位IT专家分享他们离不开的实用工具
本文的 PDF版本可供下载. #1: John Bartow,顾问 John Bartow的工作领域是网络和PC安全,他提供了自己从事的咨询公司, WinHaven Computer Consulti ...
- 搭建无人值守安装服务器（CentOS）
使用PXE+DHCP+TFTP+Kickstart+FTP搭建无人值守安装服务器.一般只有频繁安装系统才会搭建无人值守安装服务器. 虚拟机环境:youxi1,CentOS7系统双网卡,一个网卡桥接模式 ...
- 【ASP.NET Core学习】远程过程调用 - gRPC使用
本文介绍在gRPC使用,将从下面几个方面介绍 什么是RPC 什么时候需要RPC 如何使用gRPC 什么是RPC RPC是Remote Procedure Call简称,翻译过来是远程过程调用.它是一个 ...
- 【python画图】
1.热力图 import numpy as np import numpy.random import matplotlib.pyplot as plt # Generate some test da ...
- Salt之CentOS7.5使用RPM包安装MySQL5.7.22
手动安装参考CentOS7.5使用RPM包安装MySQL5.7.22 目录结构为 install.sls文件 #按顺序分别安装commin libs client server #避免冲突安装comm ...
- django 之(六) --- Celery|Admin
Celery - 分布式任务队列 简介: Celery是一个简单,灵活且可靠的分布式系统,可以处理大量消息,同时为操作提供维护该系统所需的工具.这是一个任务队列,着重于实时处理,同时还支持任务调度. ...
- 学习Yii(2)
Yii拥有很好的手册,还是中文的,官方的手册很详细.还是应该好好看一下.今天就开始跟着项目代码调试. 上次看到入口脚本,学习一定要快,要用心,抓住时间.不然时间拖久了就忘了.延续不上,大打折扣.而且要 ...