两列：左边固定右边自动适应

最新推荐文章于 2025-12-13 16:25:56 发布

原创最新推荐文章于 2025-12-13 16:25:56 发布 · 647 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #wrapper #xhtml #float #html #文档

本文提供了一个简单的网页布局案例，展示了如何使用HTML和CSS实现左右两栏布局。左侧栏包含红色背景，右侧栏为蓝色背景，整体布局简洁明了。

<!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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> *{ margin:0; padding:0} body{ margin:0; padding:0} #wrapper{ width:100%; background:#FCF; height:600px; padding-top:50px; overflow:hidden; line-height:20px;} #left_div{ width:180px; background-color:#F03; float:left; height:300px; padding:10px; overflow:hidden; margin-left:50px; _margin-left:25px;} #right_div{ background-color:#06F; padding:10px; margin-left:260px;}</style> </head> <body> <div id="wrapper"> <div id="left_div"> 左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边 </div> <div id="right_div"> 右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边 </div> </div> </body> </html>