位置：广州松河 > 技术支持 > CSS：左侧栏固定宽度，右侧栏自适应宽度_CSS学习

CSS：左侧栏固定宽度，右侧栏自适应宽度_CSS学习

来源：网络整理时间：2023/3/4 0:55:57 共 3649 浏览

相关：《左边固定，右边自适应及左边自适应，右边固定布局的几种方法》【更全】

最近在学习各种CSS知识，特别是制作网站常用的，比如今天来分享的一个CSS。在制作zblog模板时候经常会用到一侧栏固定宽度，另一侧栏可以自适应宽度，特别是一些zblog博客、CMS主题常用到。

如上图所示，是我写出来的比较简单的CSS，可以实现左侧栏固定宽度，右侧栏会自适应宽度与高度。（红色线条是左侧栏固定的宽和高）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS：左侧栏固定宽度，右侧栏自适应宽度</title>

</head>

<body>

<style>

 .wrap{}

 .wl{width: 200px; border: 1px solid #f35; float: left;}

 .wr{width: 99%; border: 1px solid #000; }

 .wrrrr{margin-left: 200px;}

</style>

<div class="wrap">

 <div class="wl">

  固定宽度左侧固定宽度左侧固定宽度左侧固定宽度左侧固定宽度左侧固定宽度左侧固定宽度左侧固定宽度左侧固定宽度左侧<br><br><br><br><br><br><br><br><br><br><br>

 </div>

 <div class="wr">

  <div class="wrrrr">右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧</div>

 </div>

</div>

</body>

</html>

如果需要右侧栏固定宽度，而左侧栏可以自适应宽度呢？继续分享：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>右侧栏固定宽度，左侧栏宽度自适应CSS</title>
</head>
<style>/* 两列左侧自适应布局 */
.wrap{border: 1px solid #000; overflow: hidden;}
.wleft{float:left;width:99.5%; border: 0px solid #f35;}
.wleftc{margin-right:240px;}
.wright{position:relative;
 float:right;
 width:230px;margin-left:-240px;
 border: 1px solid blue;}
 </style>
<body>
<div class="wrap">
    <div class="wleft">
        <div class="wleftc">
            <p>左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应
            适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左<br><br><br><br><br></p>
        </div>
    </div>
    
    <div class="wright">
        <p>右侧定宽<br><br><br><br></p>
    </div>
</div>
</body>
</html>

在制作zblog各种模板的时候就可以用上了。

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS: position实现左侧栏高度自适应，依右侧栏高度而定 - 等高布局_CSS学习 | ·下一条： iPhone Safari IOS系统不兼容 :hover 的解决方法_前端技术