没有合适的资源?快使用搜索试试~ 我知道了~
CSS实现两栏布局,左边固定,右边自适应的4种方法
4 下载量 192 浏览量
2020-11-21
17:34:39
上传
评论
收藏 35KB PDF 举报
温馨提示
试读
3页
1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
资源推荐
资源详情
资源评论
CSS实现两栏布局,左边固定,右边自适应的实现两栏布局,左边固定,右边自适应的4种方法种方法
1. float+overflow:hidden
这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的
haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
margin: 0 auto; // 使父容器水平居中显示
overflow: hidden;
zoom: 1;
max-width: 1000px;
}
.left {
float: left;
margin-right: 20px;
width: 200px;
background-color: green;
}
.right {
overflow: hidden;
zoom: 1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left left left left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
2. float: left+ margin-left
float使左边的元素脱离文档流,右边的元素可以和左边的元素显示在同一行,设置margin-left让右边的元素不覆盖掉左边的元
素, 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
margin: 0 auto;
max-width: 1000px;
}
.parent::after {
content: '';
display: table;
clear: both;
}
.left {
float: left;
width: 200px;
资源评论
weixin_38744526
- 粉丝: 16
- 资源: 960
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 信呼OA系统2.1.7版源码
- 3122080306 邹子轩 实验报告二.docx
- 基于STM32 NUCLEO板设计彩色LED照明灯(纯cubeMX开发)(大赛作品,文档完整,可直接运行)
- 发那科工业机器人保养大全
- Sphere.h
- REMD固有时间尺度分解信号分量可视化(Matlab完整源码和数据)
- 嵌入式系统双单片机STC89C52+STC15W104多功能学习板电路图可扩展 适用于单片机初学者和教学
- 基于STM32蓝牙控制小车系统设计(硬件+源代码+论文)大赛作品
- XILINXFPGA源码基于Spartan3火龙刀系列FPGA开发板VGA测试例程
- Java聊天室的设计与实现【尚学堂·百战程序员】
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功