首页 > 代码库 > html笔记 横向两列布局
html笔记 横向两列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> *{margin:0;padding:0;} #wrap{width:960px;margin:0 auto;background:#00C;} #header{background:#FF3300;width:100%;} #mainbody{background:#FC0;width:100%;overflow:hidden; } .left{width:820px;height:400px;background:#36C;float:left;margin-right:20px;} .right{width:120px;height:600px;background:#0F3;float:right;} #footer{background:#60C;clear: both;} </style> <body> <div id="wrap"> <div id="header">头部</div> <div id="mainbody"> <div class="left">left</div> <div class="right">right</div> </div> <div id="footer"> 脚注</div> </div> </body> </html>
浮动会动mainbody和footer影响，分别采取
1.width:100%;overflow:hidden;
2.clear:both;
html笔记 横向两列布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。