前端常用布局:左边固定,右边自适应

创建于

左侧固定,右边自适应是PC端和移动端常见的页面布局,那么实现这个效果的方式也有很多种。比如说给定义两个盒子,左边的盒子写个固定的宽度,定位到页面的最左端,右边的盒子加一个margin=左边盒子的宽度,这样就实现了上面的布局方式。这次用一个很巧妙的方式实现上面的效果。
页面基本布局

1
2
3
4
5
6
<div class="box1"></div>
<div class="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate veritatis
ipsa expedita suscipit laboriosam illum asperiores maxime iste vel temporibus
ipsum quo reprehenderit, minus mollitia, autem, impedit fuga sint corporis.
</div>

实现效果样式:

1
2
3
4
5
6
7
8
9
.box1{
width:150px;
height:800px;
background:lightcoral;
float:left;
}
.box2{
overflow:hidden;
}

在这里巧妙的利用了浮动和overflow:hidden实现最终效果,在页面大小改变的时候或者说在不同的设备上,左侧保持不变,右侧随着屏幕的大小进行改变。

目录都去哪了...