前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应

左右布局：左边定宽、右边自适应，

1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上

先看代码

<style>

body{margin:0;} //为了统一布局，去掉了浏览器自带body的margin值

.left{ width:200px; float:left; height:400px;; background:#99F;}

.main{ height:400px; background:#CCC;}

</style>

<body>

</body>

1.2 绝对定位法

此方法的原理大体就是将左侧的块元素设置为position:absolute;右侧默认宽度，且将margin-left的值设为200px，即为左栏的宽度。

<style>

body{margin:0;}

.left{ position:absolute; top:0; width:200px; height:400px; background:#99F; left:0;}

.main{ height:400px; background:#CCC; margin-left:200px;}

</style>

<body>

</body>

1.3弹性盒

display：flex; 设置为弹性盒子，其子元素可以通过设置 flex 的数值来控制所占空间的比例。

body{margin:0; display: flex}

.left{ width:200px; height:400px; background:#99F; left:0;}

.main{ height:400px; background:#CCC; flex: 1}

</style>

<body>

</body>

2、左右定宽中间自适应宽度

1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上

<style>

  body{margin:0;}
    .left{ width:200px; float:left; height:400px;; background:#99F;}
    .right{ width:200px; float:right; height:400px; background:#39F;}
    .main{ height:400px; background:#CCC;}
</style>
<body>
<div class="left">左</div>
<div class="right">右</div>
<div class="main">中</div>

2.2 绝对定位法

<style>

body{ margin:0;}

.left,.right{ position:absolute; top:0; width:200px; height:400px;}

.left{ background:#99F; left:0;}

.right{ background:#39F; right:0;}

.main{ height:400px; background:#CCC; margin:0 200px;}

</style>

<body>

</body>

<style>

1.3弹性盒

display：flex; 设置为弹性盒子，其子元素可以通过设置 flex 的数值来控制所占空间的比例。

body{margin:0; display: flex}

.left{ width:200px; height:400px; background:#99F; left:0;}

.main{ height:400px; background:#CCC; flex: 1}

.right{ width:200px; height:400px; background:#99F; left:0;}

</style>

<body>

</body>

前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应

猜你喜欢