老话长谈,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实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动的更多相关文章

  1. CSS基础 和 font字体、背景属性连写 与 清除浮动方法

    1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...

  2. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

  3. css两列自适应宽度布局(左定宽,右自适应)

    1.利用BFC: <div id="root"> <div class="left">左</div> <div cla ...

  4. DIV左、中、右三列布局的各类情况说明

    一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...

  5. 话说C++中的左值、纯右值、将亡值

    写在前面 C++中有“左值”.“右值”的概念,C++11以后,又有了“左值”.“纯右值”.“将亡值”的概念.关于这些概念,许多资料上都有介绍,本文在拾人牙慧的基础上又加入了一些自己的一些理解,同时提出 ...

  6. c++ 11 移动语义、std::move 左值、右值、将亡值、纯右值、右值引用

    为什么要用移动语义 先看看下面的代码 // rvalue_reference.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #includ ...

  7. C++ 11 左值,右值,左值引用,右值引用,std::move, std::foward

    这篇文章要介绍的内容和标题一致,关于C++ 11中的这几个特性网上介绍的文章很多,看了一些之后想把几个比较关键的点总结记录一下,文章比较长.给出了很多代码示例,都是编译运行测试过的,希望能用这些帮助理 ...

  8. C++11 左值、右值、右值引用详解

    C++11 左值.右值.右值引用详解 左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡值. 在C++11中可以取地址的.有名字的就是左值,反之,不能取地址的.没 ...

  9. C++11 左值、右值、右值引用

    左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡值.在C++11中可以取地址的.有名字的就是左值,反之,不能取地址的.没有名字的就是右值(将亡值或纯右值).举个 ...

随机推荐

  1. 牛客网小白月赛5I区间(差分数组)

    链接:https://www.nowcoder.com/acm/contest/135/I来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 32768K,其他语言65536 ...

  2. mathML如何在谷歌浏览器进行展示

    前几天不是做了个word公式的解析吗,就是office插入的公式是个xmlObject对象,读出来就是个String,所以要进行转换才能在网页上展示,其实我对这方面也不是很了解,然后各种百度解决方案, ...

  3. POJ 1459 Power Network / HIT 1228 Power Network / UVAlive 2760 Power Network / ZOJ 1734 Power Network / FZU 1161 (网络流,最大流)

    POJ 1459 Power Network / HIT 1228 Power Network / UVAlive 2760 Power Network / ZOJ 1734 Power Networ ...

  4. 函数式编程(九)——map,filter,reduce

    编程方法论: 面向过程:按照一个固定的流程去模拟解决问题的流程 函数式:编程语言定义的函数 + 数学意义的函数 y = 2*x + 1 函数用编程语言实现 def fun(x): return 2*x ...

  5. 走进HTTP协议之二 基本HTTP机制

    本系列第一节,我们回顾了与HTTP协议有关的基本术语和概念,本文将分析HTTP协议的基本原理与机制 HTTP协议的用途 HTTP协议用于客户端与服务器之间的通信,在通信线路两端,必定一端是客户端,另一 ...

  6. 2018.10.2浪在ACM 集训队第三次测试赛

    2018.10.26 浪在ACM 集训队第三次测试赛 今天是暴力场吗???????可怕 题目一览表 来源 考察知识点 完成时间 A 1275 珠心算测试 NOIP 普及组 2014 暴力??? 201 ...

  7. 2018.9南京网络预选赛(J)

    传送门:Problem J https://www.cnblogs.com/violet-acmer/p/9720603.html 变量解释: need[ i ] : 第 i 个房间含有的旧灯泡个数. ...

  8. [译]Golang中的优雅重启

    原文 Graceful Restart in Golang 作者 grisha 声明:本文目的仅仅作为个人mark,所以在翻译的过程中参杂了自己的思想甚至改变了部分内容,其中有下划线的文字为译者添加. ...

  9. Spring + Mybatis 读写分离

    项目背景:项目开发中数据库使用了读写分离,所有查询语句走从库,除此之外走主库. 实现思路是: 第一步,实现动态切换数据源:配置两个DataSource,配置两个SqlSessionFactory指向两 ...

  10. selenium_基本用法

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...