div三栏布局，右侧自适应宽度代码示例

2022-07-15 80酷酷网 80kuku.com

　　div三栏布局，右侧自适应宽度代码示例
以下是HTML网页特效代码，点击运行按钮可查看效果：以下是程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"><head><title>3列流体布局(s1-s2-c)</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="author" content="MarVel" /><style type="text/css">/* <![CDATA[ */* {margin:0; padding:0;}body, html {width:100%;}#wrapper {position:relative; padding-left:350px; background:yellow; overflow:hidden; +display:inline-block;}.content {width:100%; background:#ccc; float:left;}.sidebar1 {position:relative; left:-350px; _left:0; width:200px; height:500px; background:red; float:left; margin-left:-100%;}.sidebar2 {position:relative; left:-150px; _left:200px; width:150px; height:300px; background:orange; float:left; margin-left:-100%;}/* ]]> */</style></head><body><div id="wrapper"> <div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div> <div class="sidebar1">sidebar-1</div> <div class="sidebar2">sidebar-2</div></div></body></html></font></font><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]