本文主要是介绍2.3双飞翼布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
圣杯布局的改进版
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{min-width: 600px;}/*头部脚部样式*/#header, #footer{border: 1px solid;background: gray;text-align: center;}#content .middle, #content .left, #content .right{height: 50px;line-height: 50px;float: left;}/*双飞翼布局*/#content{/*margin: 0 200px;*/overflow: hidden;}#content .middle{background: pink;width: 100%;}#content .middle .inner{padding: 0 200px;}#content .left, #content .right{background: yellow;width: 200px;text-align: center;}#content .left{margin-left: -100%;}#content .right{margin-left: -200px;}</style></head><body><div id="header"><h4>header</h4></div><div id="content"><div class="middle"><div class="inner">丁香一样的芬芳</div></div><div class="left">丁香一样的颜色</div><div class="right">丁香一样的忧愁</div></div><div id="footer"><h4>footer</h4></div></body>
</html>
这篇关于2.3双飞翼布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!