布局两列div等高方法
一、左右布局，左侧div绝对定位，外div相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{margin:0;padding: 0;}
.container{
width: 1000px;
margin:0 auto;
background: #c6c;
position: relative;
}
.side{
width: 200px;
background: #c66;
height: 100%;
position: absolute;
top:0;
left: 0;
}
.content p{padding-left: 210px;color: #fff;}
</style>
<body>
<div class="container">
<div class="side">side</div>
<div class="content">
<p>驿外断桥边，</p>
<p>寂寞开无主。</p>
<p>已是黄昏独自愁，</p>
<p>更著风和雨。</p>
<p>无意苦争春，</p>
<p>一任群芳妒。</p>
<p>零落成泥碾作尘，</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
</div>
</div>
</body>
</html>
2.左侧div左浮动，右div加背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{margin:0;padding: 0;}
.container{
width: 1000px;
margin:0 auto;
background: #c6c;
overflow: hidden;
}
.side{
width: 200px;
float: left;
}
.content{background: #6c6;margin-left: 200px;}
.content p{color: #fff;padding-left: 10px;}
</style>
<body>
<div class="container">
<div class="side">side</div>
<div class="content">
<p>驿外断桥边，</p>
<p>寂寞开无主。</p>
<p>已是黄昏独自愁，</p>
<p>更著风和雨。</p>
<p>无意苦争春，</p>
<p>一任群芳妒。</p>
<p>零落成泥碾作尘，</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
</div>
</div>
</body>
</html>
3.通过padding正值，margin负值实现，参考别人的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{margin:0;padding: 0;}
.container{
width: 1000px;
margin:0 auto;
overflow: hidden;
}
.side{
width: 200px;
background: #c66;
float: left;
padding-bottom:2000px;
margin-bottom: -2000px;
}
.content{
margin-left: 200px;
background:#c6c;
padding-bottom:2000px;
margin-bottom: -2000px;
}
.content p{color: #fff;padding-left: 10px;}
</style>
<body>
<div class="container">
<div class="side">side</div>
<div class="content">
<p>驿外断桥边，</p>
<p>寂寞开无主。</p>
<p>已是黄昏独自愁，</p>
<p>更著风和雨。</p>
<p>无意苦争春，</p>
<p>一任群芳妒。</p>
<p>零落成泥碾作尘，</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
</div>
</div>
</body>
</html>
4.通过左浮动和margin-left负值来实现，参考别人的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS特效-两列等高布局效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
*{margin:0;padding:0}
html{overflow-y:scroll}
body{font-size:12px;background:#fff;color:#333}
ul,ol{list-style:none}
a{text-decoration:none;color:#f30}
img{border:none}
.clearfix{zoom:1}
.clearfix:after{content:"";display:block;height:0;line-height:0;font-size:0;visibility:hidden;clear:both}
.ct_wrap{width:950px;margin:0 auto;zoom:1;background:#e0e0e0;}
.content{margin-left:150px;background: #c66;}
.main_col{float:left;width:100%;word-wrap:break-word}
.side_col{float:left;width:150px;margin-left:-950px;position:relative;word-wrap:break-word} </style>
</head>
<body> <div class="ct_wrap">
<div class="content clearfix">
<div class="main_col">
<p>驿外断桥边，</p>
<p>寂寞开无主。</p>
<p>已是黄昏独自愁，</p>
<p>更著风和雨。</p>
<p>无意苦争春，</p>
<p>一任群芳妒。</p>
<p>零落成泥碾作尘，</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
<p>只有香如故。</p>
</div>
<div class="side_col">我可以有背景色</div>
</div>
</div>
</body>
</html>
布局两列div等高方法的更多相关文章
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- css实现内容不相同的左右两个div等高
问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...
- NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应
CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- css实现左右两个div等高
提出问题: 现在有两个div,但是两个div里面内容多少不确定,可能左边多,可能右边多,css要如何设置可以保证左右两边的div等高呢? 解决方案: 每个div使用display:table-cell ...
- 纯CSS实现三列DIV等高布局
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- 两栏自适应布局，右侧div宽高不定
.main,.sitebar{ height: 300px; font: bolder 20px/300px "微软雅黑"; color: bl ...
- NEC学习 ---- 布局 -两列定宽
这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
随机推荐
- SqlSever基础 over与avg配合，将平均值添加到原表的右侧，并为新列起名
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- 关于directX最近的学习方案
目标:弄清楚如何渲染一个地形,以及人物坐标以及摄像机方向,弄清四大矩阵原理 实践: 1.再次学习矩阵相关知识 2.实现红龙本书的地形 3.搜寻这方面资料书籍
- CSS在线字体库，外部字体的引用方法
目录: 1:CSS家族五大字体 2:360和谷歌外部字体引用方法 3:谷歌外部字体引用方法详解 4:@font-face用法详解 一: {font-family:serif,sans-serif,fa ...
- CUBRID学习笔记 47 show
cubrid的中sql查询语法show c#,net,cubrid,教程,学习,笔记欢迎转载 ,转载时请保留作者信息.本文版权归本人所有,如有任何问题,请与我联系wang2650@sohu.com . ...
- 检测服务器IP端口是否可用
private static double Scanner(string ip, int port) { try { System.Net.Sockets.TcpClient Tcp = new Sy ...
- hdu 4223 Dynamic Programming?
Dynamic Programming? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- 上不了Google是码农的悲哀
http://refyt.com/?r=34d1edb7dba42e8d 上不了Google是码农的悲哀.1. 资料大部分都在国外的网站,差不多倍感伤心.2. Google Play没有办法访问了.3 ...
- iOS - UIWebView
前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIWebView : UIView <NSCoding, UIScrol ...
- apt-get下载的文件
1. http://kurenai.elastos.org/2013/05/02/ubuntu-apt-get%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86/ http:// ...
- 分享几个Javascript 封装方法
基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...