使用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个基本概念:定位.浮动.外边距操纵. 只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动.因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围他们的块框产生任何影响 ...
随机推荐
- Qt编写自定义控件30-颜色多态按钮
一.前言 这个控件一开始打算用样式表来实现,经过初步的探索,后面发现还是不够智能以及不能完全满足需求,比如要在此控件设置多个角标,这个用QSS就很难实现,后面才慢慢研究用QPainter来绘制,我记得 ...
- 一百三十四：CMS系统之版块管理二
编辑 html,将数据渲染到tr上,方便js取值 js //编辑板块$(function () { $('.edit-board-btn').click(function (event) { var ...
- 目标检测 - TridentNet
转载: https://zhuanlan.zhihu.com/p/54334986 http://haha-strong.com/2019/07/25/20190725-TridentNet/ 开源代 ...
- SQL查询交集、并集、差集
两个表A 和表 T 交集 intersect 并集 UNION SQL:select df from A union select sd from T; 在Union后不加A ...
- java 注解@interface
类注解: package com.cglibs; import java.lang.annotation.ElementType; import java.lang.annotation.Retent ...
- postman--接口网站测试
直接在官网下载安装即可 https://www.getpostman.com/downloads/
- CentOS 7安装gevent
CentOS 7安装gevent 首先确认python版本不低于python 2.7 执行python –V(或者python -vision) 安装pip工具 方式一: [root@server-0 ...
- 利用Gabor变换法分析纹理图像 matlab代码实现
Gabor变化属于加窗傅里叶变换,Gabor函数可以在频域不同尺度.不同方向上提取相关的特征.Gabor函数与人眼的生物作用相仿,所以经常用于纹理识别上,并取得了较好的效果. 二维Gobor滤波函数: ...
- 【amad】cookiecutter -- 一个命令行工具，使用项目模版来构建项目
动机 简介 个人评分 动机 一般的框架都有脚手架工具,但是并不会让所有人满意. 简介 cookiecutter1是一个Python实现的命令行工具,可以通过项目模版来构建项目. 它的特性包括: 跨平台 ...
- 【首发】uExitCode解释
uExitCode 进程退出码,一般设置为0,不是的话也没有错误. 它的主要作用是,通知调用这个程序的其他程序退出的原因. 以前在dos下可能用的较多,现在windows下用的很少,而且windows ...