左右两侧宽度固定,中间自适应这种布局相信很多feers都遇到过,可是有可能你没有系统的研究过有哪几种解决方案,本文章立志以浅显的语言来讲解其中一种圣杯解决方案。
圣杯
左右两侧宽度固定,中间自适应preview
一般我们在写这种三列布局时希望中间主体部分优先渲染,因此在html中把main部分提到left和right前面。
实现
以下代码实现由浅入深,一点一点实现,希望初学前端的同学或者比较薄弱的同学可以比较容易看懂,如果是对这种布局已经比较熟悉的同学直接看最后的实现代码吧。
float:left布局,定宽设置固定像素,自适应设置宽度为100%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.left,
.middle,
.right{
float: left;
min-height: 100px;
}
body {
margin: 0;
}
.middle {
width: 100%;
background: red;
}
.left {
width: 200px;
background: green;
}
.right {
width: 220px;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
margin-left固定left和right位置
以上代码因为main的宽度是100%撑满了整个页面,后面浮动的掉到了下面,可以设置-margin-left把left和right位置重排。设置left的margin-left: -100%,left顶到了container左上,那么right移动到left原来的位置,再将right的margin-left设置为-本身宽度,left和right的位置就定位好了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.left,
.middle,
.right{
float: left;
min-height: 100px;
}
body {
margin: 0;
}
.middle {
width: 100%;
background: red;
}
.left {
width: 200px;
background: green;
margin-left: -100%;
}
.right {
width: 220px;
background: blue;
margin-left: -220px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
relative+padding解决main居中显示
以上代码实现有个问题就是main扔充满整个container被left遮挡,通过设置container的左右padding为left和right留空间,再用relative属性偏到正确的位置上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.left,
.middle,
.right{
float: left;
min-height: 100px;
}
body {
margin: 0;
}
.container {
padding: 0 220px 0 200px;
overflow: hidden;
}
.middle {
width: 100%;
background: red;
}
.left {
width: 200px;
background: green;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 220px;
background: blue;
margin-left: -220px;
position: relative;
left: 220px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
双飞翼布局
双飞翼布局和圣杯布局其实很想,只是在解决container 100%遮挡问题上解决不同,双飞翼使用的是内嵌div设置margin来缩小main内容区宽度
以上圣杯和双飞翼布局有问题或者哪里说的不对希望大家多多指正。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。