css布局中左侧固定右侧自适应
- float 单一层浮动法
左侧固定成100px; 则核心代码 左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px;
绝大浏览器是没有任何问题的，除了万恶的浏览器IE6，两层中间有缝隙 3px; - 定位
在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container{
height:200px;
background-color: pink;
}
.left{
width:100px;
border-right:none;
height:50px;
float:left;
background-color:yellow;
}
.right{
margin-left:100px;
width:auto;
height:100px;
background-color:blue;
}
.container1{
height:200px;
background-color: pink;
position: relative;
}
.left1{
position: absolute;
top: 0;
left: 0;
width:100px;
border-right:none;
height:50px;
/* float:left; */
background-color:yellow;
}
.right1{
margin-left:100px;
width:auto;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div>aaa</div>
<div class="container1">
<div class="left1"></div>
<div class="right1"></div>
</div>
</body>
</html>
- 主流浏览器都是支持的 包括IE6，除了这些还可以进行扩展 例如：，在两个元素加上border，就可以实现，如果采用第一种方法 IE7 是不支持 显示的效果会是这样。
- 所以说 第二种还是不错的，不少大家都会误解有时候 在float和定位都可以实现的时候，到底要采用哪种方式，我觉得那要看你想要兼容哪种浏览器，主流的（非IE6）两种都很不错，但是IE中关于float的bug 太多
css布局中左侧固定右侧自适应的更多相关文章
- css布局之左侧固定右侧自适应布局
参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
- 七种CSS左侧固定,右侧自适应两栏布局
一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
- html布局,左侧固定右侧自适应
前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...
- CSS左侧固定右侧自适应
方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...
- 一个简单的左侧固定右侧自适应demo
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
随机推荐
- JZ-064-滑动窗口的最大值
滑动窗口的最大值 题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值 ...
- dvwa-暴力破解（low-high）
靶场环境 phpstudy8.1.1.3 Apache2.4.39 FTP0.9.60 MySQL5.7.26 Burpsuite v2.1 LOW 首先看一下源码: 这里没有任何限制,可以使用万能破 ...
- laravel 实现详情分页
选择合适的PHP框架及前端框架布局页面(10分) 首先展示出分类列表,每个分类下只显示3条信息,无需分页 (30分) 在列表页 点击文章标题进入详细页面,对应的文章点击量+1(30分) 在详细页面点击 ...
- spring源码干货分享-对象创建详细解析（set注入和初始化）
记录并分享一下本人学习spring源码的过程,有什么问题或者补充会持续更新.欢迎大家指正! 环境: spring5.X + idea 建议:学习过程中要开着源码一步一步过 Spring根据BeanDe ...
- win server 2012下安装IIS 8后配置ASP网站的注意事项
1,安装IIS时,如果你用不到asp.net 在web下的应用程序开发只需要勾选ASP这一项就可以. 2,IIS测试成功后,需要在你设定的主目录添加权限,找到你的主目录-属性-安全-编辑,添加Ever ...
- Springboot项目 配置数据库连接属性后，启动项目报错
Springboot项目 配置数据库连接属性后,启动项目报错,错误如下: 错误原因分析: 1.连接信息配置错误 当使用properties为配置文件时,如图所示,上面的 spring.datasour ...
- AQS 源码解读之加锁篇
以 ReentrantLock 创建的非公平锁为基础,进行 AQS 全流程的分析. 分析 demo 一共有 A.B.C 三个线程. public class AQSDemo { // 带入一个银行办理 ...
- Golang 数据结构
每种语言在实现数据结构有些许不同.go 是如何实现的呢? 1. 数组 Array go 中数组是相同的元素组成的集合,计算机会为数组分配一段连续的内存来保存元素,可以利用索引快速访问元素. go 中数 ...
- Golang 基础之基础语法梳理 (二)
大家好,今天将梳理出的 Go语言基础语法内容,分享给大家. 请多多指教,谢谢. 本次<Go语言基础语法内容>共分为三个章节,本文为第二章节 Golang 基础之基础语法梳理 (一) Gol ...
- Redis快速入门：初识Redis
[IT168 专稿]在之前的文章中介绍了<Redis快速入门:选择Key-Value Store>,今天给大家介绍Redis的入门知识.Redis是一个开源的使用ANSI C语言编写.支持 ...