当前位置：Gxlcms > html代码 > DIV+CSS自适应布局_html/css_WEB-ITnose

DIV+CSS自适应布局_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：25人阅读

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

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


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

  3. 我是左栏
  • 我是右栏


    • 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. width: 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代码

    3. 我是左栏
  • 我是右栏


    • 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. width: 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代码

    3. 我是右栏
    7. 我是左栏


    CSS代码

    1. html,body,div{
    2. margin: 0;
    3. padding: 0;
    4. }
    5. .wrap{
    6. float: left;
    7. width: 100%;
    8. }
    9. .wrap .wrap_right{
    10. margin-left: 220px;
    11. background-color: green;
    12. }
    13. .wrap_left{
    14. float: left;
    15. width: 200px;
    16. margin-left: -100%;
    17. background-color: red;
    18. }

    运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com



    注：使用的float属性，必要时清除一下浮动。

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

    运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com


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


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

    2. 我是左栏
    5. 我是右栏


    CSS代码：

    1. html,body,div{
    2. margin: 0;
    3. padding: 0;
    4. }
    6. .wrap_left{
    7. float: left;
    8. width: 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代码

    3. 我是左栏
    6. 我是右栏


    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. width: 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代码：

    2. 我是左栏
    5. 我是右栏
    8. 我是中间栏


    CSS代码：

    1. html,body,div{
    2. margin: 0;
    3. padding: 0;
    4. }
    5. .wrap_left{
    6. width: 200px;
    7. float: left;
    8. background-color: red;
    9. }
    11. .wrap_content{
    12. margin-left: 220px;
    13. margin-right: 220px;
    14. background-color: yellow;
    15. }
    16. .wrap_right{
    17. width: 200px;
    18. float: right;
    19. background-color: green;
    20. }

    运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com



    2. position + margin（两侧定宽，中间自适应）
    HTML代码：

    2. 我是左栏
    5. 我是右栏
    8. 我是中间栏


    CSS代码

    1. html,body,div{
    2. margin: 0;
    3. padding: 0;
    4. }
    5. .wrap_left{
    6. width: 200px;
    7. position: absolute;
    8. background-color: red;
    9. left: 0;
    10. }
    12. .wrap_content{
    13. margin-left: 220px;
    14. margin-right: 220px;
    15. background-color: yellow;
    16. }
    17. .wrap_right{
    18. width: 200px;
    19. position: absolute;
    20. right: 0;
    21. background-color: green;
    22. }

    运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com



    3.float + 负margin（两侧定宽，中间自适应）
    HTML代码

    3. 我是中间栏
    7. 我是左栏
    10. 我是右栏


    CSS代码

    1. html,body,div{
    2. margin: 0;
    3. padding: 0;
    4. }
    5. .wrap{
    6. float: left;;
    7. width: 100%;
    8. }
    9. .wrap_left{
    10. width: 200px;
    11. float: left;
    12. margin-left: -100%;
    13. background-color: red;
    15. }
    17. .wrap_content{
    18. margin-left: 220px;
    19. margin-right: 220px;
    20. background-color: yellow;
    21. }
    22. .wrap_right{
    23. width: 200px;
    24. float: left;
    25. margin-left: -200px;
    26. background-color: green;
    27. }

    运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com



    4.table实现

    运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com



    5.BFC方法
    HTML代码

    2. 我是左栏
    5. 我是右栏
    8. 我是中间栏


    CSS代码

    1. html,body,div{
    2. margin: 0;
    3. padding: 0;
    4. }
    6. .wrap_left{
    7. float: left;
    8. width: 200px;
    9. background-color: red;
    10. }
    11. .wrap_right{
    12. float: right;
    13. width: 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代码

    3. 我是左栏
    6. 我是中间栏
    9. 我是右栏


    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. width: 200px;
    11. background-color: red;
    12. }
    13. .wrap_right{
    14. width: 200px;
    15. background-color: green;
    16. }
    17. .wrap_content{
    18. flex-grow:1;
    19. -webkit-flex-grow:1;
    20. background-color: yellow;
    21. }

    人气教程排行

    本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！