左边固定孔,左边自适应是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放在前面,这样的办法是实现不了的,需要考虑用其他办法。