使用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个基本概念:定位.浮动.外边距操纵. 只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动.因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围他们的块框产生任何影响 ...
随机推荐
- Jetson TX2介绍
Jetson TX2是NIVDIA瞄准人工智能在Jetson TK1和TX1推出后的升级 TX2的GPU和CPU都进行了升级,内存增加到了8GB.存储增加到了32GB,支持Wifi和蓝牙,编解码支持H ...
- SQL-W3School-高级：SQL AUTO INCREMENT 字段
ylbtech-SQL-W3School-高级:SQL AUTO INCREMENT 字段 1.返回顶部 1. Auto-increment 会在新记录插入表中时生成一个唯一的数字. AUTO INC ...
- 面向对象ALV选择列
通过 gs_layout-box_fname = 'SEL'.设置选择行,不能取到 SEL列的值 找资料:作者:f122300349 来源:CSDN 原文:https://blog.csdn.ne ...
- Node.js使用Express.Router
在实际开发中通常有几十甚至上百的路由,都写在 index.js 既臃肿又不好维护,这时可以使用 express.Router 实现更优雅的路由解决方案. 目录结构如下: routes的index.js ...
- Redux 视频教程
视频地址:http://www.imooc.com/learn/744
- ThreadLocal的简单介绍
ThreadLocal是什么 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地 ...
- iOS-自定义导航控制器
BasicNavigationViewController:UINavigationViwController /* 隐藏导航底部线条 */ -(void)viewDidLoad{ [super ...
- CBES = component-based entity system
比较好的介绍 CBES 的文章 http://www.richardlord.net/blog/what-is-an-entity-framework
- json转换成dart类 JSON to Dart
json_to_dart的使用 如果我们得到一个特别复杂的JSON,有时候会无从下手开始写Model,这时候就可以使用一些辅助工具.我认为json_to_dart是比较好用的一个.它可以直接把json ...
- OpenGL（5）——变换
学习三种变换:Scaling, Rotation和Translation. 上学期修了Kobbelt教授(男神!)的图形学基础课,这部分内容已经接触过. 添加GLM库,直接给出齐次坐标系下的变换矩阵和 ...