zoukankan      html  css  js  c++  java
  • DIV+CSS 自适应布局

    两栏布局,左边定宽200px,右边自适应。如何实现?
    我的第一个反应就是:用flex伸缩盒呀,然后balabala...
    说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持
    嗯...我愣了一下,平常遇到这种问题貌似都是这么写的...
    别的方法?我又想了想。JS?对,JS肯定可以。
    然后就说,可以用JS获取当前窗口宽度,然后减去200px就是右边的宽度了
    面试官:嗯,这样的确可以,但是布局一般不要用JS,还有没有别的方法?CSS的
    额,这下我完全愣住了好嘛,人也变得有些紧张。还要别的方法啊,什么方法呢???
    哎呀妈呀,想不出来,肿么办...
    然后面试官看了我半天,十分体谅的说,那我们进行下一个问题吧...
    (以上面试官原话记不大请了,但是意思就是这样~)

    回来后,经过百度,哇!原来方法如此之多~还如此简单~
    下面就来总结一下~



    一、两栏布局(左定宽,右自动)
    1. float + margin
    即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。
    举例:
    HTML代码:

    1.     <div class="wrap">
    2.             <div class="wrap_left">
    3.                     我是左栏
    4.             </div>
    5.             <div class="wrap_right">
    6.                     我是右栏
    7.             </div>
    8.     </div>
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 margin: 10px;
    7.         }
    8.         .wrap_left{
    9.                 float: left;
    10.                 200px;
    11.                 background-color: red;
    12.         }
    13.         .wrap_right{
    14.                 margin-left: 220px;
    15.                 background-color: green;
    16.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    2.position + margin
    即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。
    举例:
    HTML代码

    1.     <div class="wrap">
    2.             <div class="wrap_left">
    3.                     我是左栏
    4.             </div>
    5.             <div class="wrap_right">
    6.                     我是右栏
    7.             </div>
    8.     </div>
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 margin: 10px;
    7.                 position: relative;
    8.         }
    9.         .wrap_left{
    10.                 position: absolute;
    11.                 200px;
    12.                 background-color: red;
    13.         }
    14.         .wrap_right{
    15.                 margin-left: 220px;
    16.                 background-color: green;
    17.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    3.float + 负margin
    即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;
    固定宽度元素设置margin-left属性为负值:-100%;
    除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。
    举例:
    HTML代码

    1. <div class="wrap">
    2.             <div class="wrap_right">
    3.                     我是右栏
    4.             </div>
    5.     </div>
    6.            <div class="wrap_left">
    7.                     我是左栏
    8.     </div>
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 float: left;
    7.                 100%;
    8.         }
    9.         .wrap .wrap_right{
    10.                 margin-left: 220px;
    11.                 background-color: green;
    12.         }
    13.         .wrap_left{
    14.                 float: left;
    15.                 200px;
    16.                 margin-left: -100%;
    17.                 background-color: red;
    18.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    :使用的float属性,必要时清除一下浮动。

    4.用table布局实现
    来自评论里@qazxsw的方法:

    1. <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
    2.     <tr>
    3.         <td width="200" bgcolor="red"></td>
    4.         <td bgcolor="green"></td>
    5.     </tr>
    6. </table>
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com


    不过这个方法,一定要设置高度才可以~


    5.触发BFC实现   —— 来自评论里柯南同学@15913127081的方法
    关于BFC是什么、怎么触发BFC以及BFC可以用来做什么,大家可以看看这篇,前端精选文摘:BFC 神奇背后的原理(我会告诉你我也是才看的么~哈哈~)
    实现方法,即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。(可以触发BFC的属性?继续看上面那个链接!!)
    示例:
    HTML代码:

    1.         <div class="wrap_left">
    2.                 我是左栏
    3.         </div>
    4.         <div class="wrap_right">
    5.                 我是右栏
    6.         </div>
    复制代码


    CSS代码:

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         
    6.         .wrap_left{
    7.                 float: left;
    8.                 200px;
    9.                 background-color: red;
    10.         }
    11.         .wrap_right{
    12.                 overflow: hidden;
    13.                 background-color: green;
    14.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    前面有说到一般我都是用的flex伸缩盒,那也来说一下用flex怎么实现的吧
    6.flex伸缩盒方法
    即父标签设置display:flex属性,自适应元素设置flex-grow:1;
    HTML代码

    1.     <div class="wrap">
    2.                 <div class="wrap_left">
    3.                         我是左栏
    4.                 </div>
    5.             <div class="wrap_right">
    6.                         我是右栏
    7.                 </div>
    8.         </div>
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 display: flex;
    7.                 display: -webkit-flex;
    8.         }
    9.         .wrap_left{                
    10.                 200px;
    11.                 background-color: red;
    12.         }
    13.         .wrap_right{        
    14.                 flex-grow:1;
    15.                 -webkit-flex-grow:1;
    16.                 background-color: green;
    17.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    进阶
    二、三栏布局
    掌握了上面的方法,我们会发现制作一个三栏布局也是非常容易的。
    下面我们在上面栗子的基础上,看看实现一个两侧定宽,中间自适应的三栏布局如何实现
    1. float + margin(两侧定宽,中间自适应)
    HTML代码:

    1.         <div class="wrap_left">
    2.                     我是左栏
    3.         </div>
    4.             <div class="wrap_right">
    5.                     我是右栏
    6.             </div>
    7.         <div class="wrap_content">
    8.             我是中间栏
    9.         </div>
    复制代码


    CSS代码:

    1. html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap_left{
    6.                 200px;
    7.                 float: left;
    8.                 background-color: red;
    9.         }
    10.         
    11.         .wrap_content{
    12.                 margin-left: 220px;
    13.                 margin-right: 220px;
    14.                 background-color: yellow;
    15.         }
    16.         .wrap_right{
    17.                 200px;
    18.                 float: right;
    19.                 background-color: green;
    20.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    2. position + margin(两侧定宽,中间自适应)
    HTML代码:

    1. <div class="wrap_left">
    2.                 我是左栏
    3.     </div>
    4.         <div class="wrap_right">
    5.                 我是右栏
    6.         </div>
    7.     <div class="wrap_content">
    8.         我是中间栏
    9.     </div>
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap_left{
    6.                 200px;
    7.                 position: absolute;
    8.                 background-color: red;
    9.                 left: 0;
    10.         }
    11.         
    12.         .wrap_content{
    13.                 margin-left: 220px;
    14.                 margin-right: 220px;
    15.                 background-color: yellow;
    16.         }
    17.         .wrap_right{
    18.                 200px;
    19.                 position: absolute;
    20.                 right: 0;
    21.                 background-color: green;
    22.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    3.float + 负margin(两侧定宽,中间自适应)
    HTML代码

    1. <div class="wrap">
    2.             <div class="wrap_content">
    3.                 我是中间栏
    4.             </div>
    5.     </div>
    6.     <div class="wrap_left">
    7.                 我是左栏
    8.     </div>
    9.         <div class="wrap_right">
    10.                 我是右栏
    11.         </div>
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 float: left;;
    7.                 100%;
    8.         }
    9.         .wrap_left{
    10.                 200px;
    11.                 float: left;
    12.                 margin-left: -100%;
    13.                 background-color: red;
    14.         }
    15.         
    16.         .wrap_content{
    17.                 margin-left: 220px;
    18.                 margin-right: 220px;
    19.                 background-color: yellow;
    20.         }
    21.         .wrap_right{
    22.                 200px;
    23.                 float: left;
    24.                 margin-left: -200px;
    25.                 background-color: green;
    26.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    4.table实现

    1.         <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
    2.     <tr>
    3.         <td width="200" bgcolor="red"></td>
    4.         <td bgcolor="yellow"></td>
    5.         <td width="200" bgcolor="green"></td>
    6.     </tr>
    7.     </table>
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



    5.BFC方法
    HTML代码

    1.         <div class="wrap_left">
    2.                 我是左栏
    3.         </div>
    4.     <div class="wrap_right">
    5.                 我是右栏
    6.         </div>
    7.         <div class="wrap_content">
    8.                 我是中间栏
    9.         </div>
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         
    6.         .wrap_left{
    7.                 float: left;
    8.                 200px;
    9.                 background-color: red;
    10.         }
    11.         .wrap_right{
    12.                 float: right;
    13.                 200px;
    14.                 background-color: green;
    15.         }
    16.         .wrap_content{
    17.                 overflow: hidden;
    18.                 background-color: yellow;
    19.         }
    复制代码
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com


    注:HTML中先写定宽元素,再写自适应宽度元素。

    6.flex伸缩盒
    即父标签设置display:flex属性,自适应元素设置flex-grow:1;
    HTML代码

    1.     <div class="wrap">
    2.                 <div class="wrap_left">
    3.                         我是左栏
    4.                 </div>
    5.                 <div class="wrap_content">
    6.                         我是中间栏
    7.                 </div>
    8.             <div class="wrap_right">
    9.                         我是右栏
    10.                 </div>
    11.         </div>
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 display: flex;
    7.                 display: -webkit-flex;
    8.         }
    9.         .wrap_left{                
    10.                 200px;
    11.                 background-color: red;
    12.         }
    13.         .wrap_right{        
    14.                 200px;
    15.                 background-color: green;
    16.         }
    17.         .wrap_content{
    18.                 flex-grow:1;
    19.                 -webkit-flex-grow:1;
    20.                 background-color: yellow;
    21.         }
    复制代码
  • 相关阅读:
    我是一条内存[转]
    随机翻唱辑 [2006.8.18更新]
    CentOS NTFS 挂载
    grub备忘
    CentOS 使用163软件源
    被车撞了
    爱上苦瓜
    无聊的游戏
    今天去爬山了
    博客搬家了:www.sanv.org
  • 原文地址:https://www.cnblogs.com/jizhijunboke/p/4990091.html
Copyright © 2011-2022 走看看