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

最新推荐文章于 2023-08-13 09:34:53 发布

七友__

最新推荐文章于 2023-08-13 09:34:53 发布

阅读量316

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44378954/article/details/88046992

版权

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

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

<DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>测试练习</title>  
</head>  
<body>  
<div class="parent">    
    <div class="side">侧栏</div>  
    <div class="main">主栏</div>  
</div>  
</body>  
</html>

方法一（推荐）：

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

CSS代码：

body{   
    margin:0;   
    padding:0;   
    font-size:30px;   
    font-weight:bold;       
}   
.parent{   
    text-align:center;   
    line-height:200px;   
}

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

七友__

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
横向两列布局（左列固定，右列自适应）的3种CSS实现方式

这篇文章主要介绍了横向两列布局，即左列固定，右列自适应的4种CSS实现方式，感兴趣的小伙伴们可以参考一下HTML代码&lt;DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试练习&lt;/title&gt; &lt;/head&
复制链接

扫一扫