css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动
老话长谈,css的不固定适应布局 不管是面试还是在平时的工作中,这样的布局形式一直都在用着,很常见,所以今天我就拿出来在唠叨一下, 既是给自己一个备忘存储,也是一个学习巩固的参考,知道大家都会,还是要记忆一下,不为其他,就为打好基础。
话说太多, 直接上代码,一看就能明白。 也许你会不屑一顾的说简单,可是我就喜欢写一些。。。。。。作为一个菜鸟,就要从基础努力学习才行。
方法多种, 你有新的方法可以补充说明,在此感谢!!
一、左边布局固定,右边自适应的布局
*{ margin:0; padding:0}
.whole{ width:100%;}
<div class="whole">
<p>自适应测试</p>
<div class="left">固定左侧 300px</div>
<div class="right">右侧自适应</div>
</div>
方法1: 左侧用float浮动,给固定宽度,右侧 左边距的距离==左侧层的宽度
css代码:
.left{ float:left;width:300px; background:red}
.right{ margin-left:300px; background:green; }
方法2:左边绝对定位absolate,右边代码没变化 还是右侧 左边距的距离==左侧层的宽度;
css代码:
.left{ position: absolute; left:0; width:300px; background:red}
.right{ margin-left:300px; background:green; }
方法3(个人喜好用):左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠)
css代码:
.left{ position: absolute; left:0; width:300px; background:red}
.right{ position: absolute; left:300px; background:green; }
二、左边布局不固定,右边布局固定-----方法一致,位置换下而已
<div class="whole">
<p>自适应测试</p>
<div class="left">左侧自适应</div>
<div class="right">右侧宽度固定</div>
</div>
方法1、左侧用左浮动,右边距==右侧层的宽度的负值(因为你是左撑开,距离右侧的距离不错层), 右侧的有浮动,固定宽度
.left{ float:left; width:100%; margin-right:-300px; background: red; }
.right{ float: right; width: 300px;background: blue;}
方法2、左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠)
.left{ position: absolute; left:0; width: 100%; background: red;}
.right{ position: absolute; left:200px; width:200px; background: green;}
方法3、
清除浮动的方法就一笔带过, 都会
1、在浮动层的下面单独定义一个层 <div class="clear"></div> .clear{ clear:both}
2、伪类方法:after (用在父类的布局层上)-常用
.father::after,.father::before{ clear: both; content: ""; display: table;}
<div class='father'>
<div class="son-flotleft"></div>
<div class="son-flotrgt"></div>
</div>
3、父级元素设置overflow为hidden或者auto,固定高度 也可以--不建议
.father{overflow:hidden; width: 100%; } //overflow:auto; height:300px;
写的都比较简单, 文字表述很少,都是代码,说的思路再多,不让直接代码实际,用了后就明白意思了,good lucky。。
补充-- 禁止横屏
<div class="orientation-alert"><p>
在竖屏下浏览效果更佳!
</p></div>
.orientation-alert{
background: rgba(0,0,0,.85);
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1000000;
color: #FFF;
display: none;
}
.orientation-alert p{
position: absolute;
width: 100%;
top: 50%;
font-size: 20px;
line-height: 30px;
margin-top: -15px;
text-align: center;
}
@media screen and (orientation : landscape){
.orientation-alert{
display: block;
}
}
@media screen and (orientation : portrait){
.orientation-alert{
display: none;
}
}
css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动的更多相关文章
- CSS基础 和 font字体、背景属性连写 与 清除浮动方法
1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...
- CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
- css两列自适应宽度布局(左定宽,右自适应)
1.利用BFC: <div id="root"> <div class="left">左</div> <div cla ...
- DIV左、中、右三列布局的各类情况说明
一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...
- 话说C++中的左值、纯右值、将亡值
写在前面 C++中有“左值”.“右值”的概念,C++11以后,又有了“左值”.“纯右值”.“将亡值”的概念.关于这些概念,许多资料上都有介绍,本文在拾人牙慧的基础上又加入了一些自己的一些理解,同时提出 ...
- c++ 11 移动语义、std::move 左值、右值、将亡值、纯右值、右值引用
为什么要用移动语义 先看看下面的代码 // rvalue_reference.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #includ ...
- C++ 11 左值,右值,左值引用,右值引用,std::move, std::foward
这篇文章要介绍的内容和标题一致,关于C++ 11中的这几个特性网上介绍的文章很多,看了一些之后想把几个比较关键的点总结记录一下,文章比较长.给出了很多代码示例,都是编译运行测试过的,希望能用这些帮助理 ...
- C++11 左值、右值、右值引用详解
C++11 左值.右值.右值引用详解 左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡值. 在C++11中可以取地址的.有名字的就是左值,反之,不能取地址的.没 ...
- C++11 左值、右值、右值引用
左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡值.在C++11中可以取地址的.有名字的就是左值,反之,不能取地址的.没有名字的就是右值(将亡值或纯右值).举个 ...
随机推荐
- Android设置RadioButton在文字的右边
效果图如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...
- dijkstra(最短路)和Prim(最小生成树)下的堆优化
dijkstra(最短路)和Prim(最小生成树)下的堆优化 最小堆: down(i)[向下调整]:从第k层的点i开始向下操作,第k层的点与第k+1层的点(如果有)进行值大小的判断,如果父节点的值大于 ...
- Microsoft JET Database Engine 错误 '80004005' 未指定错误
Microsoft JET Database Engine 错误 '80004005'未指定错误 =====解决=======出现这种“未指定错误”时,可以尝试重新注册ASP脚本解释链接库文件在CMD ...
- 使用博客系统发生_STORAGE_WRITE_ERROR_错误
因为本人有自己的vps正好又最近学习了网络的搭建,但是呢不是一番风顺的在假设好PHP.http和MySQL后吧一个博客系统放进去后出现了以下问题 好吧== 出来了这个问题到是让我看了半天,然后查了查说 ...
- 系统自带的日志管理工具-rsyslogd
系统自带的日志管理工具-rsyslogd 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.日志管理简介 1.什么是日志 系统日志是记录系统中硬件.软件和系统问题的信息,同时还可以 ...
- RIP配置详解
RIP配置详解 一.RIP协议概述 1.RIP是Routing Information Protocol(路由信息协议)的简称: 2.RIP是一种基于距离矢量(Distance-Vector)算法的路 ...
- Spark记录-Spark性能优化解决方案
Spark性能优化的10大问题及其解决方案 问题1:reduce task数目不合适解决方式:需根据实际情况调节默认配置,调整方式是修改参数spark.default.parallelism.通常,r ...
- lucene教程【转】【补】
现实流程 lucene 相关jar包 第一个:Lucene-core-4.0.0.jar, 其中包括了常用的文档,索引,搜索,存储等相关核心代码. 第二个:Lucene-analyzers-commo ...
- Java中 break continue return 的区别
1.break break :跳出当前循环:但是如果是嵌套循环,则只能跳出当前的这一层循环,只有逐层break才能跳出所有循环: ; i < ; i++) { ) { break; // 在执行 ...
- 骨骼动画的原理及在Unity中的使用
制作骨骼动画 我们看看这几步操作后,我们得到了那些数据: 1.每个皮肤顶点的初始世界坐标. 2.每个骨骼关节顶点的初始世界坐标. 3.每个顶点被骨骼顶点的影响信息. 4.骨骼如何移动. 骨骼动画原理 ...