Home >Web Front-end >HTML Tutorial >css div layout (fixed left and right, automatic size in the middle)_html/css_WEB-ITnose
css div layout (fixed left and right, automatic size in the middle)_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:27:481343browse
<!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> Note: The order of divs in mainbody is left, right, center; if reversed, it will kill people
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn