使用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 ...
- Swift 数据类型
Swift 提供了非常丰富的数据类型,以下列出了常用了几种数据类型: Int 一般来说,你不需要专门指定整数的长度.Swift 提供了一个特殊的整数类型Int,长度与当前平台的原生字长相同: 在32位 ...
- Linux-命令与文件的查询
命令与文件的查询: 1.脚本文件名的查询: which(寻找执行文件) 命令格式: which [-a] command -a:列出查询到的所有命令的路径 2.文件名的查找: whereis.loca ...
- mysql主从数据一致性校验和修复
1. 安装 yum install -y perl-IO-Socket-SSL.noarch perl-Digest-MD5 yum -y install http://www.percona.com ...
- 查看进程的命令ps
查看进程的命令:ps aux strace -p pid(进程id) 杀死进程:kill pid(进程id)强制杀死进程:kill -9 pid(进程id) linux ps 命令查看进程状态linu ...
- 用alert打印js对象
用alert查看对象: function writeObj(obj){ var description = ""; for(var i in obj){ var property= ...
- Github上的python开源项目
Python开源项目,期待大家和我们一起共同维护 github排名榜单 https://github.com/trending github搜索榜单:https://github.com/search ...
- 【VS开发】MFC中调用C函数模块的解决方案
[VS开发]MFC中调用C函数模块的解决方案 标签(空格分隔): [VS开发] 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:最近调试基于MFC的程序 ...
- 前端手势控制图片插件书写三（将transform变化应用在图片和canvas画布上）
注意:transform的scale为负数时,图片会垂直翻转 一.在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量.在第一次移动过后. ...
- JavaSE基础（九）--Java二进制运算
Java二进制运算 Java二进制表示法 首先了解下二进制,二进制是相对十进制而言的,当然还有八进制,十六进制等等,我们常用的都是十进制,计算机用的都是二进制,而符号表示常用十六进制. 二进制就是只有 ...