布局两列div等高方法
2024-10-16 11:50:23
一、左右布局，左侧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>
最新文章
- Security » Authorization » 基于资源的授权
- Muzli – 所有你需要的设计灵感都在这
- zabbix 微信报警
- css 小三角
- AVL树详解
- 12个滑稽的C语言面试问答——《12个有趣的C语言问答》评析(5)
- Console.WriteLine()与MessageBox.Show()的区别
- （2015年郑州轻工业学院ACM校赛题） E 汇编原理
- 查看centos系统位数和强制关闭yum
- JavaScript是如何工作的：深入类和继承内部原理 + Babel和TypeScript 之间转换
- VMware卸载有残留，再安装时报错提示MSI Failed
- 【angularjs】使用ionic+angular 搭建移动端项目，字体适配
- 学习用Node.js和Elasticsearch构建搜索引擎（2）：一些检索命令
- JavaScript限制前端页面用户表单输入
- vue---进行post和get请求
- nib must contain exactly one top level object which must be a UICollectionReusableView instance
- PreApplicationStartMethodAttribute的使用
- 使用SDNN (space displacement neural network)进行多字体手写识别
- Mac下进行基于java服务端语言的微信公众号本地js-sdk调试的大致方法
- 3.10 Templates -- Development Helpers
热门文章
- Python3基础 三元表达式实例
- ruby学习总结01
- （1）创建一个叫做People的类： 属性：姓名、年龄、性别、身高 行为：说话、计算加法、改名 编写能为所有属性赋值的构造方法； （2）创建主类： 创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80； 让该对象调用成员方法： 说出“你好！” 计算23+45的值 将名字改为“李四”
- 首先，定义一个Print类，它有一个方法void output(int x)，如果x的值是1，在控制台打印出大写的英文字母表；如果x的值是2，在 控制台打印出小写的英文字母表。其次，再定义一个主类——TestClass，在主类 的main方法中创建Print类的对象，使用这个对象调用方法output ()来打印出大 小写英文字母表。
- html之a标签
- A Star算法笔记
- JMS【一】--JMS基本概念
- phpcms 在后台增加了一个模型的话，在数据库中就会相应的增加数据库表
- NYOJ 128 前缀式计算
- RTSP协议、RTMP协议、HTTP协议的区别