CSS两列布局的多种方式

Posted 2023-03-21

参考技术A 两列布局（一侧固定宽度，一侧自适应），在工作中应该是经常使用到，可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式，欢迎大家补充。

修改 css 就可实现 位置调换 ，如下：

优点 ： 交换 <div class="sidebar">固定</div> 、 <div class="main">自适应</div> 顺序 ，实现主要内容优先加载渲染。

缺点 ：absolute 定位，脱离文档流，当 sidebar 列的高度，超过 main 列的高度，会遮住下面的元素。需要给父盒子设置 overflow 属性。

也支持位置调换：

缺点 ：不能实现主要内容优先加载渲染。

位置调换：

这里有一点需要注意： .sidebar 没有设置高度，会和 .container 保持一样的高度。 .container 的高度是被 .main 撑开的，也就是和 .main 高度一样。

位置调换：

这里 .main 和 .sidebar 高度不单独设置的话，也是同样的高度。

位置调换：

位置调换：

这里让 .main 成为 BFC 主要是消除 .sidebar 因 float 带来的影响，只要能让 .main 成为 BFC 就行。

此外留给大家一个思考题，还有没有其他方式呢？

css 两列布局的多种实现方式及原理。

　　两列布局是非常常见的需求在实际项目中，实现的方式也有很多。这里提供几种实现方式和原理。供大家参考

　　页面基本布局如下代码所示：

　　

 1 <div class="main">
 2     <div class=‘left‘>
 3         左侧    1
 4     </div>
 5     <div class=‘right‘>
 6         右侧    1
 7         <div>假如div很多的话</div>
 8         <div>假如div很多的话</div>
 9         <div>假如div很多的话</div>
10         <div>假如div很多的话</div>
11         假如内容很多的话
12         假如内容很多的话
13         假如内容很多的话
14         假如内容很多的话
15         假如内容很多的话
16     </div>
17 </div>

　　父元素.main 包含两个子div，left和right。这里只是简单举个例子，所以布局很简单，只要有效果就好。

　　一、内联div的方式：

　　众所周知，html元素存在块级元素，内联元素以及内联块级元素等多种属性。在基本的block和inline两种属性基础上衍生出的inline-block，因为具有两种基本属性的共有特性，所以在很多地方有特殊用处。这里主要用到inline-block的inline特性，将子元素设置为inline-block使得两者不会换行。同时左侧定宽，右侧自动即可。css如下：

.main{
            width: 100%;
            height:500px;
            border: 1px solid blue;
            overflow: auto;
        }
        .left1{
            display: inline-block;
            width: 200px;
            background:#ff4433;
            vertical-align: top;
        }    
        .right1{
            display: inline-block;
            background: pink;
        }

　　二、使用绝对定位

　　绝对定位有很多特性，其中比较重要的一点是，脱离文档流，相对父元素最近的不为static定位的来定位。这里主要就用到了该特性，因为脱离了文档流，所以紧邻的div不会自动换行，只需要设好外间距即可达到效果。代码如下：

.main{
            width: 100%;
            height:500px;
            border: 1px solid blue;
            overflow: auto;
        }
        .left2{
            position: absolute;
            width: 200px;
            background:#ff4433;
        }    
        .right2{
            margin-left: 200px;
            background: pink;
        }

这里不够严谨，最好父元素为相对定位，以免发生意想不到的定位情况。

　　三、float方式

　　既然提到了绝对定位脱离文档流的方式，相信大家还会想起来另一个狂放不羁爱脱离的属性，对就是浮动。既然特性相同当然可以实现相同效果。不过这里声明一下使用浮动的话注意要清除浮动，否则会带来一些意想不到的效果，这里简便起见就不清除了。

.main{
            width: 100%;
            height:500px;
            border: 1px solid blue;
            overflow: auto;
        }
        .left3{
            float: left;
            width: 200px;
            background:#ff4433;
        }    
        .right3{
            margin-left: 200px;
            background: pink;
        }

　　四：flex布局

　　弹性流式布局，这个是根据百分比来布局的。在h5中是非常常见的。因为手机型号的问题，所以根据百分比来布局是比较合适的。如果固定宽度的话，很容易就出现问题。有关flex的内容，这里不详细描述。只稍微提一下flex布局的基本思想：将设置为display: flex的元素作为一个flex容器，其子元素根据flex对应的值来分配父容器的宽度（默认从左至右排列）。例如div1:flex1，div2:flex2 ，则div1，div2则按1：2来分配父元素的宽度。但是如果子元素有设置固定宽度，则剩下的子元素按flex对应比例分配余下的区域。所以要实现左侧定宽的效果，只需设置左侧固定宽度即可，若左侧不定宽，可以按照比例来分配各子元素的宽度。代码如下：

.main4{
     display: flex;
     flex-flew:row;
 }
.left4{
        width:200px;
 }
 .right4{
        flex:3;
 }

或者非定宽的布局：

.main4{
            display: flex;
            flex-flew:row;
        }
        .left4{
            flex:1;
        }
        .right4{
            flex:3;
        }

　　以上就是关于两列布局的几种实现方式，为了体现思路即可，所以很多地方不够严谨。希望能给需要的同学提供下参考和思路。还是那句话抛砖引玉，希望有兴趣的同学一起探讨。

　　转载请注明出处！！