时间：2023-09-26 10:18:01 | 来源：网站运营
时间：2023-09-26 10:18:01 来源：网站运营
利用div+css实现几种经典布局的详解，样式以及代码！：
在线咨询
<div class="container"> <div class="left"></div> <div class="right"></div> </div> css代码*{ margin: 0px; padding: 0px; } .container{ height: 500px; background: yellow; } .left{ float: left; width: 200px; height: 100%; background: red; } .right{ margin-left: 200px; background: green; height: 100%; }这个实现起来比较的简单,左侧的div给浮动，右侧的divmargin-left使其从左侧div右侧开始展现,加背景颜色方便观察。<div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>css代码 *{ margin:0px; padding: 0px; } .container{ background: yellow; height: 500px; } .left{ background: red; float: left; width: 200px; height: 100%; } .center{ /*第一种用浮动，加上左右外边距，不用绝对定位 这里我推荐把html中的right写在center的前面,如果按顺序写的话会把right挤到下面，感兴趣的可以自己试试 */ /*margin: 0 200px;*/ /*第二种用浮动加绝对定位*/ /*position: absolute; left: 200px; right: 200px;*/ background: grey; height: 500px; } .right{ background: green; float: right; width: 200px; height: 100%; }<div class="container"> <div class="top"></div> <div class="center"></div> <div class="bottom"></div> </div>css代码*{ margin:0px; padding: 0px; } .container{ background: yellow; width: 100%; } .top{ background: red; width: 100%; height: 200px; position: absolute; top: 0; } .center{ width: 100%; background: grey; position: absolute; top: 200px; bottom: 200px; } .bottom{ width: 100%; background: green; height: 200px; position: absolute; bottom: 0;这里用到了绝对定位，把上面的和下面的分别设置top:0,bottom:0 固定在上下两端，中间的距离上下200px即可<div class="container"> <div class="content"></div> <div class="footer"></div> </div>css代码 *{ margin: 0px; padding: 0px; } html{ height: 100%; } body{ min-height: 100%; position: relative; } .content{ width: 100%; background:red; padding-bottom: 200px; } .footer{ width: 100%; height: 200px; background: green; position: absolute; bottom: 0; }固定footer在底部和把foorter往下挤着走都比较容易实现，但是合到一起，就不好弄了吧，其实也不难，更改content的高度，就可以看到效果了关键词：样式,布局,实现,经典,利用
