<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>DIV布局</title> <style> #header { background: #000; color: #fff; text-align: center; padding: 5px; } #middle { height: 100%; width: 100%; display: table; } #nav { float: left; height: 100%; width: 100px; padding: 5px; background: #eee; line-height: 30px; /* display: table-cell; */ } #section { float: left; /* display: table-cell; */ height: 100%; padding: 10px; } #footer { background: #000; color: #fff; text-align: center; padding: 5px; clear: both; } </style> </head> <body> <div id="header"> <h1>City gallery</h1> </div> <div id="middle"> <div id="nav"> London<br> Paris <br> Tokyo <br> </div> <div id="section"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames,London has been a major settlement for two millennia,its history going back to its founding by the Romans,who named it Londinium. </p> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom,who named it Londinium. </p> </div> </div> <div id="footer"> copyright ? W3Schools.com </div> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。