三栏布局 两栏布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三栏布局 两栏布局相关的知识，希望对你有一定的参考价值。
参考技术A 实现三栏等高布局，且两边的侧栏宽度固定，中间一栏占用剩余的空间。1.flex：
containerdisplay:flex;
.left，.rightwidth:200px;
.mainflex-grow:1;
两列布局
1.flex
.container
display: flex;
height: 100px;
.container.left
width: 100px;
height: 100%;
background-color: red;
.container.right
flex:1;
height: 100%;
background-color: green;
2、浮动
.container.left
float: left;
width: 100px;
height: 100px;
background-color: red;
.container.right
margin-left: 100px;
height: 100px;
background-color: green;
3、定位
.container
position: relative;
width: 100%;
height: 100px;
.container.left
position: absolute;
width: 100px;
height: 100%;
background-color: red;
.container.right
margin-left: 100px;
width: 100%;
height: 100%;
background-color: green;
如何实现左边两栏一定比例，左栏高度随右栏高度自适应？
记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。
前几天面试时有道css题没做出来，回来好好学习一番后把其记录下来。
题目是这样的：左中右三栏布局，左右两栏宽度固定，左右两栏的宽度为200像素，中间栏宽度自适应。当屏幕小于600px时，3栏会分别占用一行。像这样
当屏幕大于600px时，是这样
我做出来用了css3的@media，如果不用这个，好吧，水平有限想不出来。。。
下面是代码：
<!DOCTYPE>
<html>
<head>
<style>
body{
margin: 0 ;
padding: 0;
}
@media screen and (min-width: 600px){
.left,.right{
position: absolute;
top:0;
height: 50px;
width: 200px;
}
.left{
left:0;
background-color: red;
}
.center{
height: 50px;
margin: 0 200px;
background-color: orange;
}
.right{
right:0;
background-color: blue;
}
}
@media screen and (max-width: 600px){
.left,.right{
height: 50px;
width: 200px;
float:left;
}
.left{
background-color: red;
}
.center{
width: 100%;
height: 50px;
float: left;
background-color: orange;
}
.right{
background-color: blue;
}
}
</style>
<head>
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
</html>
以上是关于三栏布局 两栏布局的主要内容，如果未能解决你的问题，请参考以下文章
记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。