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的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
随机推荐
- 《JavaScript 秘密花园》
恰巧今天是传统民间重要的节日之一--七夕节: 被大家挂在嘴上最多的一句话便是:有对象了吗?这不-- 这样的话,那咱就先给new出一个对象吧: var boyfriend = new Object(); ...
- 关于RabbitMQ交换机的理解
RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,最初起源于金融系统,用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面表现不俗.消息中间件主要用于组件之间的解耦,消 ...
- 《转》Python学习(19)-python函数(二)-关于lambda
转自http://www.cnblogs.com/BeginMan/p/3178103.html 一.lambda函数 1.lambda函数基础: lambda函数也叫匿名函数,即,函数没有具体的名称 ...
- guzzle http异步 post
use GuzzleHttp\Pool;use GuzzleHttp\Client;//use GuzzleHttp\Psr7\Request;use Psr\Http\Message\Respons ...
- [转] 基于TINY4412的Andorid开发-------简单的LED灯控制
阅读目录 一.编写驱动程序 二.编写代码测试驱动程序 三.编写HAL代码 四.编写Framework代码 五.编写JNI代码 六.编写App 参考资料: <Andriod系统源代码情景分析> ...
- VC/MFC程序开启关闭和打开自己或其他软件,更改窗口类
一. 关闭自身软件 直接在需要关闭的位置输入 HANDLE hself = GetCurrentProcess(); TerminateProcess(hself, 0); 二.关闭其他软件 流程: ...
- jquery实践
转:http://www.cnblogs.com/Wayou/p/jquery_best_prictise.html jQuery编程的最佳实践 好像是feedly订阅里看到的文章,读完后觉得非常 ...
- yii---load怎么使用
在用YII进行二次开发的时候,看到登录方法有一个load的方法: public function actionLogin() { if (Yii::$app->request->isPos ...
- 不错的Spring学习笔记(转)
Spring学习笔记(1)----简单的实例 --------------------------------- 首先需要准备Spring包,可从官方网站上下载. 下载解压后,必须的两个包是s ...
- Python开发一个多并发的FTP SERVER
允许同时支持多用户在线 用户认证 用户空间配额 权限限制 可上传下载,上传下载中显示进度条 用户可远程切换目录,查看服务端文件列表等 可断点续传