CSS 3列等高
方法1:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#wrap
{
overflow: hidden;
width: 1000px;
margin: 0 auto;
margin-top: 200px;
background-color: blue;
padding: 10px;
}
#left, #center, #right
{
margin-bottom: -9900px;
padding-bottom: 10000px;
margin-left: 10px;
padding-left: 10px;padding-top: 10px;
border: solid 1px yellow;
}
#left
{
float: left;
width: 250px;
background: #00FFFF;
}
#center
{
float: left;
width: 400px;
background: #FF0000;
}
#right
{
float: left;
width: 250px;
background: #00FF00;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
</div>
<div id="center">
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
<p>
center</p>
</div>
<div id="right">
<p>
right</p>
<p>
right</p>
<p>
right</p>
</div>
</div> <p>
center</p>
</body>
</html>
方法2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应高布局</title>
<style type="text/css">
html,body{margin:0; padding: 0;} .fl { float: left; }
.container3 { background:green; overflow: hidden; position: relative;}
.container2 { background:yellow; position: relative; right: 30%;/*大小等于col3的宽度*/ }
.container1 { width: 100%; background:red; position: relative; right: 40%; /*大小等于col2的宽度*/}
.col1 { width: 26%;/*增加了2%的padding，所以宽度减少4%*/ position: relative; left: 72%;/*距左边呀增加2%就成72%*/ overflow: hidden;background-color: gray; }
.col2 { width: 36%;/*增加了2%的padding，所以宽度减少4%*/ position: relative; left: 76%; /*距左边有三个padding为2%,所以距离变成76%*/overflow: hidden; }
.col3 { width: 26%; /*增加了2%的padding，所以宽度减少4%*/position: relative; left: 80%;/*距左边5个padding为2%，所以距离变成80%*/ overflow: hidden; }
</style>
</head>
<body>
<div class="container3 fl">
<div class="container2 fl">
<div class="container1 fl"> <div class="col1 fl">左<br/>小时候我有一个梦想，长大了我就忘了...</div>
<div class="col2 fl">中<br/>小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...</div>
<div class="col3 fl">右<br/>小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...</div> </div>
</div>
</div>
</body>
</html>
CSS 3列等高的更多相关文章
- css两列等高布局
布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...
- 三列等高 css实现
实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden; 关键点就是三列div 同时margin-botto ...
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 【CSS】 布局之多列等高
这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- 用css样式围剿等高列问题（转载）
明修栈道暗度陈仓 该秘籍的心法只有十二个字:”隐藏容器溢出,正负内外边距.”看完下面的几行代码,再看这句话你真的可以看到圣光! 隐藏容器溢出.将外层容器的溢出设为隐藏: .container { ov ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
随机推荐
- (iOS)判断GPS坐标是否在中国
博文转载至 http://blog.csdn.net/cuibo1123/article/details/45691631 火星坐标经纬度范围 由于火星坐标问题,所以需要判断一下经纬度是否在中国. 基 ...
- 转：Android开发：使用DDMS Heap进行内存泄露调试
无论怎么小心,想完全避免bad code是不可能的,此时就需要一些工具来帮助我们检查代码中是否存在会造成内存泄漏的地方.Android tools中的DDMS就带有一个很不错的内存监测工具Heap,本 ...
- Android学习之DatePicker和TimePicker
在Android开发的应用程序中,通常都会有时间和日期选择的需求,下面就对日期选择控件DatePicker和时间选择控件TimePicker的基本使用方法进行介绍: DatePicker ...
- Cent OS 常用命令搜集
打开一个 Shadowsocks 配置文件nano /etc/shadowsocks.json 重启 Shadowsocks/etc/init.d/shadowsocks restart centos ...
- open-falcon之graph
功能 存储agent push的数据 为query 提供查询数据接口 参考RRDtool的理念,在数据每次存入的时候,会自动进行采样.归档.在默认的归档策略,一分钟push一次的频率下, 历史数据保存 ...
- Linux IPC BSD socket编程基础
头文件 #include<unistd.h> #include <sys/types.h> #include <sys/socket.h> #include< ...
- Python学习(24)：Python面向对象(2)
转自 http://www.cnblogs.com/BeginMan/p/3191037.html 一.类 类就是一个数据结构,封装了数据和操作. 类的声明与函数的声明十分类似: class newC ...
- 【线程】Volatile关键字
Volatile变量具有 synchronized 的可见性特性,但是不具备原子特性.这就是说线程能够自动发现 volatile变量的最新值.Volatile变量可用于提供线程安全,但是只能应用于非常 ...
- Webpack2 升级指南和特性摘要（转）
Webpack2 升级指南和特性摘要 resolve.root, resolve.fallback, resolve.modulesDirectories 上述三个选项将被合并为一个标准配置项:res ...
- eclipse安装maven时候如果conf文件夹中有setting文件则会以这个文件为主，如果自己设置了user的配置文件则会无效
eclipse安装maven时候如果conf文件夹中有setting文件则会以这个文件为主,如果自己设置了user的配置文件则会无效