淘先锋技术网

首页 1 2 3 4 5 6 7

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

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

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

左侧固定右侧自适应效果图.gif

如上图所示，是我写出来的比较简单的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各种模板的时候就可以用上了。