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的论坛 不过现在关门了 甚是可 ...
随机推荐
- Codeforces Round #725 (Div. 3) A-D，F题解
A. Stone Game 思路:总共3种情况,都从最左端被拿走,都从最右端被拿走,左侧的从最左端被拿走且右侧的从最右端被拿走,取最小值即可 代码: //CF-725.A #include<bi ...
- Spring AOP之3w的配置
1.3w是什么? ■ what.where.when 或者 what.when.where 2.what.where.when[通用] (1)what:增强器-bean[配置一个bean对象] (2) ...
- MySQL第四讲
昨日内容回顾 表与表之间建关系(外键) """ 表与表之间最多只有四种关系 一对多 多对多 一对一 没有关系 在确定表与表之间的关系的时候记住一句话 换位思考 " ...
- C语言之判断质数算法
今天学校OJ的一题判断是质数和合数. 首先我们要弄明白质数和合数的概念:质数就是除了本身和1以外没有其他因数的数,合数就是除了本身和1以外还有其他因数的数.注意:1既不是质数也不是合数. 明白了概念, ...
- 【NLP】
- Python：pyglet学习（3）：游戏循环
在我们编游戏时,经常会用到一个无限循环,这就叫游戏循环. 先用@win.event试试 import pyglet as p win=p.window.Window(800,600) @win.eve ...
- ffmpeg修改视频文件的分辨率
在本文中,我们将展示如何调整任何视频文件的大小. 这种方法是在Linux系统(几乎任何发行版)中调整视频文件大小的最佳方法之一,也是Windows和Mac用户的绝佳替代方案. 更改视频文件的分辨率将是 ...
- 关于dotnet动态生成controller的问题
一些动态生成controller的问题 前言 最近在写包, 一开始封装了仓储Repository用于操作数据库, 然后为了快速开发一些业务简单的接口, 通过QueryController , Modi ...
- matlab语法基础（处理一点数据）
1.声明函数,返回参数data,函数名为simutrack function data=simutrack(x0,y0) 2.%用于标注,注释 3.平方 ^2 4.二维零矩阵 [0 0;0 0] 5. ...
- Circle Linux镜像在阿里云镜像站首发上线
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 Circle Linux简介 Circle Linux 社区是一个开源.共创的 Linux 社区,将通过完全开放.包容的社区形式与全球开发者共同构建 ...