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

关注

原创最新推荐文章于 2023-08-13 09:34:53 发布 563 阅读 AI 写同款· GEO 优化 ›

css实现左边定宽右边自适应的两列布局5种方法在项目实践中不乏有需要两列式布局，左侧固定右侧自适应是比较常见的布局方式，现在我就来总结一下我自己所知道的5种方法。 html代码结构：<div class="box"> <div class="con1"> 我是左边 </div> <div class="con2"> 我是右边 </div> </div>第一种： css代码：.b 阅读详情

这篇文章主要介绍了横向两列布局，即左列固定，右列自适应的4种CSS实现方式，感兴趣的小伙伴们可以参考一下

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

方法一（推荐）：

使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度

CSS代码：

body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}
.parent{
text-align:center;
line-height:200px;
}
.side{
position:absolute;left:0;top:0;
width:200px;
height:200px;
background:red;
}
.main{
margin-left:210px;
background:blue;
height:200px;
}

方法二：

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

CSS代码：

body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}
.parent{
text-align:center;
line-height:200px;
}
.side{
width:200px;
height:200px;
float:left;
background:red;
}
.main{
height:200px;
margin-left:210px;
background:blue;
}

方法三：

使用Flex布局
CSS代码：

body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}
.parent{
text-align:center;
line-height:200px;
display:flex;
}
.side{
width:200px;
height:200px;
background:red;
margin-right:10px;
}
.main{
background:blue;
height:200px;
flex:1;
}
以上就是本文的全部内容，希望对大家熟练掌握CSS布局技巧有所帮助