横向两列布局（左列固定，右列自适应）的4种CSS如何实现方式

互联网
秋天的景色真美丽，像一幅美丽的图画。

需要实现横向两列布局：左列固定，右列自适应的效果，如下图：

HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>测试练习</title>
  6. </head>
  7. <body>
  8. <divclass="parent">
  9. <divclass="side">侧栏</div>
  10. <divclass="main">主栏</div>
  11. </div>
  12. </body>
  13. </html>

方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度

CSS代码：

CSS Code复制内容到剪贴板
  1. body{
  2. margin:0;
  3. padding:0;
  4. font-size:30px;
  5. font-weight:bold;
  6. }
  7. .parent{
  8. text-align:center;
  9. line-height:200px;
  10. }
  11. .side{
  12. position:absolute;left:0;top:0;
  13. width:200px;
  14. height:200px;
  15. background:red;
  16. }
  17. .main{
  18. margin-left:210px;
  19. background:blue;
  20. height:200px;
  21. }

方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）

CSS代码：

CSS Code复制内容到剪贴板
  1. body{
  2. margin:0;
  3. padding:0;
  4. font-size:30px;
  5. font-weight:bold;
  6. }
  7. .parent{
  8. text-align:center;
  9. line-height:200px;
  10. }
  11. .side{
  12. width:200px;
  13. height:200px;
  14. float:left;
  15. background:red;
  16. }
  17. .main{
  18. height:200px;
  19. margin-left:210px;
  20. background:blue;
  21. }

方法三：使用Flex布局

CSS代码：

CSS Code复制内容到剪贴板
  1. body{
  2. margin:0;
  3. padding:0;
  4. font-size:30px;
  5. font-weight:bold;
  6. }
  7. .parent{
  8. text-align:center;
  9. line-height:200px;
  10. display:flex;
  11. }
  12. .side{
  13. width:200px;
  14. height:200px;
  15. background:red;
  16. margin-right:10px;
  17. }
  18. .main{
  19. background:blue;
  20. height:200px;
  21. flex:1;
  22. }​

方法四：利用BFC不与浮动元素重叠的特性

CSS代码：

CSS Code复制内容到剪贴板
  1. body{
  2. margin:0;
  3. padding:0;
  4. font-size:30px;
  5. font-weight:bold;
  6. }
  7. .parent{
  8. text-align:center;
  9. line-height:200px;
  10. }
  11. .side{
  12. width:200px;
  13. height:100px;
  14. float:left;
  15. background:red;
  16. margin-right:10px;
  17. }
  18. .main{
  19. /*创建BFC*/
  20. overflow:hidden;
  21. background:blue;
  22. height:100px;
  23. }

以上就是本文的全部内容，希望对大家熟练掌握CSS布局技巧有所帮助。

更多阅读内容：

学习DIV+CSS网页布局之一列布局

学习DIV+CSS网页布局之两列布局

学习DIV+CSS网页布局之三列布局

学习DIV+CSS网页布局之混合布局

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例