右边固定宽,左边自适应(1)

发布于 分类: html&css 1320

  左边固定孔,左边自适应是web前端中一种常见的布局,今天介绍一种实现方法。

 *{ margin: 0; padding: 0;}
 .wrap{ overflow: hidden;}
.sidebar{ width: 200px; height: 500px; background:red;  float: left;}
 .content{ width: 100%; margin-left: 200px; height: 200px; background: pink;}
 footer{ background: #000; height: 200px;}
<body>
<div class="wrap">
    <div class="sidebar">左边固定宽</div>
    <div class="content">右边自适应</div>

</div>
<footer>

</footer>
</body>

这样写有一个弊端,不利于搜索引擎优化,一般重点内容应该放在前面,content里面的肯定是重点内容,我们应该把他放在sidebar的前面。如果content放在前面,这样的办法是实现不了的,需要考虑用其他办法。

赞 888

关于作者:xiaona

一个喜欢研究的前端工程师。

请进入“Zblog后台” -> “畅言” 登陆你的畅言账号。