<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /> <meta name="viewport" content="width=device-width" /> <title>布局</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> body { font-family: Verdana, Arial; margin: 0; font-size: 12px; } div { background-color: #eee; border: dotted 1px green; text-align:center; } #dyleft { float: left; width: 200px; height:200px; margin-left:20px; line-height:200px; } #dycenter { margin: 0 210px; height:200px; line-height:200px; } #dyright { float: right; height:200px; line-height:200px; width: 200px; margin-right:20px; } </style> </head> <body> <div id="mainbody"> <div id="dyleft">div左栏固定宽度为200px</div> <div id="dyright">div右栏固定宽度为200px</div> <div id="dycenter">div中间自适应宽度</div> </div> </body></html>注意：mainbody中的div顺序是左、右、中；颠倒之后害死人阿
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
143
