布局两列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 ...
随机推荐
- java初始化笔记
构造器初始化static块与非static块区别:对象创建时都做块的初始化,非static块仅在实例创建时初始化,static块在类被第一次加载时初始化数组初始化注意点:1.数组定义时最好在定义的同时 ...
- 十二 个经典 Linux 进程管理命令介绍
执行中的程序在称作进程.当程序以可执行文件存放在存储中,并且运行的时候,每个进程会被动态得分配系统资源.内存.安全属性和与之相关的状态.可以有多个进程关联到同一个程序,并同时执行不会互相干扰.操作系统 ...
- UVA 10817 十一 Headmaster's Headache
Headmaster's Headache Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Sub ...
- CodeForces 567C Geometric Progression
Geometric Progression Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I ...
- HDU 5818 Joint Stacks（联合栈）
HDU 5818 Joint Stacks(联合栈) Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Ja ...
- .net 常用Response.ContentType
来源:http://blog.csdn.net/navy235/article/details/5982319 不同的ContentType 会影响客户端所看到的效果.默认的ContentType为 ...
- NYOJ 93 汉诺塔（三）
汉诺塔(三) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度 ...
- [转载] HTTP 协议漫谈
原文: http://blog.jobbole.com/88199/ 简介 网络上已经有不少介绍HTTP的的好文章.对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够 ...
- html5 drap & drop
小知识点记录一下:onselectstart,onselect 1.onselectstart 该js方法是用来控制盒中内容是否被允许选中 <head> <style> #tm ...
- linux学习笔记2-命令总结3
文件搜索命令 1.文件搜索命令 find 2.其他文件搜索命令 grep - 在文件中搜索字串匹配的行并输出 locate - 在文件资料库中查找文件 whereis - 搜索命令所在目录及帮助文档路 ...