设为首页收藏本站
切换风格
立即注册 找回密码

QQ登录

只需要一步，快速开始

APP扫码登录

只需要一步，快速开始

手机号码，快捷登录

泡泡马甲

快捷导航
  • 优惠福利
  • 美食天下
  • 旅游户外
  • 亲子乐园
  • 编程源码
  • 金典软件
  • 视频教学
  • 文档资料
  • 修改头像
  • 我的积分
  • 修改密码
  • 个人资料
  • 推广奖励
  • 改用户名
    • 泡泡马甲APP 更多内容请下载泡泡马甲手机客户端APP 立即下载 ×
    泡泡马甲»泡泡马甲 › 分类导航 › 编程源码 › CSS两列布局的多种实现方法
    返回列表 发新帖
    查看: 1589|回复: 0

    [HTML/CSS/JS] CSS两列布局的多种实现方法

    [复制链接]
    admin

    等级头衔

    积分成就    金币 : 2802
       泡泡 : 1516
       精华 : 6 篇
       在线时间 : 1243 小时
       最后登录 : 2024-4-29

    丰功伟绩

    优秀达人突出贡献荣誉管理论坛元老

    联系方式
    发表于 2020-12-10 09:36:15 | 显示全部楼层 |阅读模式
    ⏹ 阅读停止中
    一，什么是两列布局
    6 Y" y' S7 i$ F# [       两列布局分为两个，一种是垂直定宽，右侧自适应，另一种是两列都自适应（即纵向宽度由子元素决定，右侧补齐剩余空间）。( E+ L) A7 k. u: q
           在css面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下面将分别介绍实现方式。2 U6 K+ B$ e% A% d. w
    二，顶端定宽，右侧自适应如何实现？
    # q( k5 H+ _9 f2 m9 C; S7 ]1 b1、双列直插式" }# b+ B0 E: ]1 h( q7 J
    原理：两个元素都设置dislpay：inline-block，为了消除HTML空间的影响，父元素的字体大小需要设置为0，正确匹配元素的宽度使用计算函数计算。如果两个元素的高度不一样，可以给元素设置vertical-align：top调整。6 e! n( n! o3 O8 K" M$ v7 r- \
    缺点：由于父元素设置了font-size为0，子元素内文字不会显示。- C. N* Z/ _" y  q, i9 |- H
    1. <!DOCTYPE html>

    2. <html>

    3.   <head>

    4.     <meta charset="utf-8">

    5.     <title></title>

    6.     <style>

    7.        *{

    8.          padding: 0;

    9.          margin: 0;

    10.        }

    11.       .box{

    12.         height: 600px;

    13.         width: 100%;

    14.         font-size:0;

    15.       }

    16.       .left{

    17.         display: inline-block;

    18.         width: 100px;

    19.         height: 200px;

    20.         background-color: red;

    21.         vertical-align: top;

    22. 

    23.       }

    24.       .right{

    25.         display: inline-block;

    26.         width: calc(100% - 100px);

    27.         height: 400px;

    28.         background-color: blue;

    29.         vertical-align: top;

    30.       }

    31. </style>

    32.   </head>

    33.   <body>

    34.     <div>

    35.       <div>

    36.         <span>1234</span>

    37.       </div>

    38.       <div>

    39.         <span>1234</span>

    40.       </div>

    41.     </div>

    42.   </body>

    43. </html>
    2、双浮动$ v- a5 @: O- W* E  a
    原理：两个元素设置浮动，右侧自适应元素宽度使用calc函数计算7 l, |/ P, Q, u1 e' B4 [
    缺点：父元素需要清除浮动
    9 A+ T' u1 u/ h! a
    1. <!DOCTYPE html>

    2. <html>

    3.   <head>

    4.     <meta charset="utf-8">

    5.     <title></title>

    6.     <style>

    7.       *{

    8.         padding: 0;

    9.         margin: 0;

    10.       }

    11.       .box{

    12.         height: 600px;

    13.         width: 100%;

    14. 

    15.       }

    16.       .left{

    17.         float: left;

    18.         width: 100px;

    19.         height: 200px;

    20.         background-color: red;

    21.       }

    22.       .right{

    23.         float: left;

    24.         width: calc(100% - 100px);

    25.         height: 400px;

    26.         background-color: blue;

    27.       }

    28. </style>

    29.   </head>

    30.   <body>

    31.     <div>

    32.       <div>

    33.         <span>

    34.           123adadadddddddddddddddddddddddddddddddddddddddd

    35.         </span>

    36.       </div>

    37.       <div></div>

    38.     </div>

    39.   </body>

    40. </html>
    3、浮动+保证金( c7 J+ ?* C! z9 L
    原理：预设定宽元素浮动，右侧自适应元素设置margin-left的值大于定宽元素的宽度即可" w/ N! w4 w& t" ~0 d. I
    缺点：父元素需要清除浮动。6 }7 \9 U, b/ i8 {  [' l# d( H0 M5 O
    1. <!DOCTYPE html>

    2. <html>

    3.   <head>

    4.     <meta charset="utf-8">

    5.     <title></title>

    6.     <style>

    7.       *{

    8.         padding: 0;

    9.         margin: 0;

    10.       }

    11.       .box{

    12.         height: 600px;

    13.         width: 100%;

    14. 

    15.       }

    16.       .left{

    17.         float: left;

    18.         width: 100px;

    19.         height: 200px;

    20.         background-color: red;

    21.       }

    22.       .right{

    23.         margin-left: 100px;

    24.         height: 400px;

    25.         background-color: blue;

    26.       }

    27. </style>

    28.   </head>

    29.   <body>

    30.     <div>

    31.       <div>

    32.         <p>1234</p>

    33.       </div>

    34.       <div>

    35.         <p>1234</p>

    36.       </div>

    37.     </div>

    38.   </body>

    39. </html>
    4、浮动+ BFC% V3 _0 Y+ D, Q. A$ |
    原理：父元素设置溢出：隐藏，左侧定宽元素浮动，右侧自适应元素设置溢出：自动创建BFC
    & f+ e4 ?  E+ a# F缺点：前端元素的内容如果超过设定宽度会重叠到右侧元素上。* U$ o1 L) c" a8 x
    1. <!DOCTYPE html>

    2. <html>

    3.   <head>

    4.     <meta charset="utf-8">

    5.     <title></title>

    6.     <style>

    7.       *{

    8.         padding: 0;

    9.         margin: 0;

    10.       }

    11.       .box{

    12.         height: 600px;

    13.         width: 100%;

    14.         position: relative;

    15.       }

    16.       .left{

    17.         position: absolute;

    18.         width: 100px;

    19.         height: 200px;

    20.         background-color: red;

    21.       }

    22.       .right{

    23.         margin-left: 100px;

    24.         height: 400px;

    25.         background-color: blue;

    26.       }

    27. </style>

    28.   </head>

    29.   <body>

    30.     <div>

    31.       <div></div>

    32.       <div></div>

    33.     </div>

    34.   </body>

    35. </html>
    6、flex布局' x/ a7 _# [9 g) c/ H1 G
    原理：父元素设置display：flex，自适应元素设置flex：1
    ( D3 J+ ~( o0 l缺点：存在兼容性问题，IE10以下不支持: x& C9 j1 |' r: U: O+ z* x
    1. <!DOCTYPE html>

    2. <html>

    3.   <head>

    4.     <meta charset="utf-8">

    5.     <title></title>

    6.     <style>

    7.       *{

    8.         padding: 0;

    9.         margin: 0;

    10.       }

    11.       .box{

    12.         height: 600px;

    13.         width: 100%;

    14.         display: flex;

    15.       }

    16.       .left{

    17.         width: 100px;

    18.         height: 200px;

    19.         background-color: red;

    20.       }

    21.       .right{

    22.         flex: 1;

    23.         height: 400px;

    24.         background-color: blue;

    25.       }

    26. </style>

    27.   </head>

    28.   <body>

    29.     <div>

    30.       <div></div>

    31.       <div></div>

    32.     </div>

    33.   </body>

    34. </html>
    三，左右两端元素都自适应4 Q+ ~* V) r) P! t
           严格来说，并不算两个元素都是适应，只是将上面的定宽替换由子元素撑开而已
    4 Z  B, d8 N# I4 `! i1、浮动+ BFC$ b* G3 o0 Z$ Q8 V: q$ E4 _9 m
    原理和上面一样，只是稍微元素的宽度没有设置，由子元素撑开
    * Q1 J" f. d: M& G) B$ B2、table布局4 \: H/ U0 D2 K+ ?
    原理：父元素显示：表格，垂直元素外围用一个div包装，该div设置显示：表格单元格，宽度：0.1％（保证最小宽度），右侧元素内部设置margin-right，右侧元素设置显示：table-cell。2 a* B0 w& N+ e
    缺点：IE7及以下不支持，当display：tabletime，padding失效，父元素的line-height属性失效，当display：table-cell时，margin无效。9 n, @9 z. v8 B6 k1 W
    1. <!DOCTYPE html>

    2. <html>

    3.   <head>

    4.     <meta charset="utf-8">

    5.     <title></title>

    6.     <style>

    7.       .parent{

    8.         display: table;

    9.         width: 100%;

    10. 

    11.       }

    12.       .box{

    13.         display: table-cell;

    14.         width: 0.1%;

    15.       }

    16.       .left{

    17.         margin-right: 20px;

    18.         background-color: red;

    19.         height: 200px;

    20.       }    

    21.       .right{

    22.         display: table-cell;

    23.         background-color: blue;

    24.         height: 300px;

    25.       }

    26. </style>

    27.   </head>

    28.   <body>

    29.     <div>

    30.       <div>

    31.         <div>126545453dddddddd453453453</div>

    32.       </div>

    33.       <div>12121</div>

    34.     </div>

    35.   </body>

    36. </html>
    3、flex布局" \& u' @4 E' v9 W3 }1 ?+ D; z
    原理，缺点同上面的flex布局& G9 u: m) y% k8 C
    4、网格布局/ t) W" o6 o' q3 U1 T3 k2 J6 k
    原理：父元素设置显示：grid，grid-template-columns：auto 1fr;（这个属性定义列宽，auto关键字表示由浏览器自己决定长度。fr是一个相对尺寸单位，表示剩余空间做等分） grid-gap：20px（行间距）
    , c; n5 i* s+ j, ?& b( B缺点：兼容性太差，IE11都不支持，谷歌57以上才可以。
    1 n* I2 _# p* I# i6 Z
    1. <!DOCTYPE html>

    2. <html>

    3.   <head>

    4.     <meta charset="utf-8">

    5.     <title></title>

    6.     <style>

    7.       .parent{

    8.         display:grid;

    9.         grid-template-columns:auto 1fr;

    10.         grid-gap:20px

    11.       }  

    12.       .left{

    13.         background-color: red;

    14.         height: 200px;

    15.       }

    16.       .right{

    17.         height:300px;

    18.         background-color: blue;

    19.       }

    20. </style>

    21.   </head>

    22.   <body>

    23.     <div>

    24.       <div>1111111111111111111111111</div>

    25.       <div></div>

    26.     </div>

    27.   </body>

    28. </html>
    布局, CSS, 两列, 自适应, 元素

    相关帖子
    回复

    举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号 )

    GMT+8, 2024-4-30 02:29

    Powered by paopaomj X3.4 © 2016-2024 sitemap

    快速回复 返回顶部 返回列表