前言：
目前你们对“cssdiv高度自适应”可能比较注意，我们都想要剖析一些“cssdiv高度自适应”的相关文章。那么小编同时在网络上网罗了一些有关“cssdiv高度自适应””的相关资讯，希望同学们能喜欢，你们一起来了解一下吧！一开始做这个效果的时候，我用的是图层的方法来控制的，写起来很麻烦。而且到后面的效果也不是很合适，换分辨率小的电脑，中间的内容就会盖到左边的图片上面。用了中间自适应的话就可以避免这个问题啦。
做项目的时候要实现如图这样的一个效果，左右各是一张图片，中间内容自适应宽度
下面举个例子和附上代码简单介绍这个方法，这个布局实现的原理主要是使用float来实现左右环绕，中间的容器设置overflow：hidden来防止容器塌陷，浮动经常会造成一些塌陷问题，所以需要清除浮动，这样设置可以使中间自适应然后左右对齐。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>css布局小技巧</title>
</head>
<style type="text/css">
.nav{
height: 100px;
background: #fff;
font-size: 16px;
color: red;
line-height: 50px;
text-align: center;
}
.left{
float: left;
background: pink;
width: 200px;
height: 100px;
margin-right: 10px;
}
.right{
float: right;
background: pink;
width: 200px;
height: 100px;
margin-left: 10px;
}
.center{
height: 100px;
background: yellow;
overflow: hidden;
}
</style>
<body>
<div class="nav">
<div class="left">
<p>左边内容定宽、左浮</p>
</div>
<div class="right">
<p>右边内容定宽、右浮</p>
</div>
<div class="center">
<p>中间自适应内容、在HTML中写在最后，渲染顺序从上到下。注意：如果写在前面，还没检测到左右块的宽度，那么center的宽度就自动填充满父级的宽度</p>
</div>
</div>
</body>
</html>
标签： #cssdiv高度自适应
