布局两列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 ...
随机推荐
- Linux运维命令之一
释放内存:syncecho 3 > /proc/sys/vm/drop_caches Linux查看Dell服务器型号命令:dmidecode | grep "Product Name ...
- HDU 5810 Balls and Boxes（盒子与球）
Balls and Boxes(盒子与球) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/O ...
- CSS笔记（六）链接
参考:http://www.w3school.com.cn/css/css_link.asp 链接的四种状态 ① a:link - 普通的.未被访问的链接 ② a:visited - 用户已访问的链接 ...
- GitHub详细教程（转载）
1 Git详细教程 1.1 Git简介 1.1.1 Git是何方神圣? 1.1.2 重要的术语 1.1.3 索引 1.2 Git安装 1.3 Git配置 1.3.1 用户信息 1.3.2 高亮显示 1 ...
- LTE Module User Documentation（翻译5）——Mobility Model with Buildings
LTE用户文档 (如有不当的地方,欢迎指正!) 8 Mobility Model with Buildings 我们现在通过例子解释如何在 ns-3 仿真程序中使用 buildings 模型(特别 ...
- [转]-如何将Eclipse中的项目迁移到Android Studio 中
英文地址:http://developer.android.com/sdk/installing/migrate.html 翻译:Android Studio 中文组(大锤译) 如果你之前有用Ecli ...
- 使用Maven构件Web应用
一个典型的WAR文件会有如下目录结构: Maven的WEB项目结构: jetty-maven-plugin默认很好地支持了Maven的项目结构.在通常情况下,我们只需要直接在IDE中修改源码,IDE能 ...
- 装了maven插件的eclipse中M2_REPO无法编辑、删除（转）
今天用了新版本的eclipse,用maven在命令行生成了一个普通项目.导入eclipse之后发现本地仓库的路径不正确. 显示的为 user.path/.m2/repository 但是我的仓库早已经 ...
- SG 复习全部 (全部SG 总览)
1. SQL 基础 进入查缺补漏阶段 2. PL/SQL 进入 practice 阶段 3. Fundamental 1 这部分还是比较重要 architecture 数据库启动与关闭步骤 insta ...
- php按条件查询的数据分页显示，点击下一页时又列出全部数据的解决办法
其实很简单,只要把表单提交方式改为get方式就行了,然后调用分页函数: function getpage(&$m,$where,$pagesize=10){ $m1=clone $m;//浅复 ...