要布局左右两边定宽，中间自适应
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了要布局左右两边定宽，中间自适应相关的知识，希望对你有一定的参考价值。
最近在布局时，有一些问题，左右两边定宽，中间自适应，首先想到的就是左浮动和右浮动，但是在操作时还是会出现一些问题
1. 采用左边左浮动，右边右浮动，中间块用margin-left/margin-right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wrapper{ width: 100%; margin: 0 auto; } .wrapper::after{ content:‘‘; display: block; height: 0; width: 0; clear: both; visibility: hidden; zoom:1; } .left{ float: left; width: 300px; height: 200px; background-color: #960; } .right{ margin-top: -200px; float: right; width: 300px; height: 200px; background-color: #690; } .center{ height: 200px; background-color: pink; margin: 0 300px; } </style> </head> <body> <div class="wrapper"> <div class="left">左边内容</div> <div class="center">中间部分</div> <div class="right">右边内容</div> </div> </body> </html>
效果图是这样的
这里本想着只要左边浮动，右边浮动，中间就用margin-left/right就OK了，但是右边的div一直在下边，只能手动修改它的margin-top值-200px
2. 采用绝对定位的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrapper{
position: relative;
width: 100%;
margin: 0 auto;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100px;
background-color: #690;
}
.right{
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 100px;
background-color: #e32922;
}
.center{
height: 100px;
background-color: #4d6cee;
position: absolute;
left: 200px;
right: 200px;
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="left">左边内容</div>
<div class="center">中间部分</div>
<div class="right">右边内容</div>
</div>
</body>
</html>
效果图是这样的
目前就认为这两种方式是明晰的。
以上是关于要布局左右两边定宽，中间自适应的主要内容，如果未能解决你的问题，请参考以下文章