首页 > 代码库 > 要布局左右两边定宽，中间自适应
要布局左右两边定宽，中间自适应
最近在布局时，有一些问题，左右两边定宽，中间自适应，首先想到的就是左浮动和右浮动，但是在操作时还是会出现一些问题
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>
效果图是这样的
目前就认为这两种方式是明晰的。
要布局左右两边定宽，中间自适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。