变宽度布局
总宽度设置 width: 85%; min-width: 650px; （关于IE6的min-width支持，可用）
content 设置 width: 66%; float: left;
side 设置 width: 33%; float: right;
加入clear 空div
HTML 结构：
<!DOCTYPE HTML><html> <head> <title>1-2-1 等比例变宽</title> <meta charset="utf-8" /> </head> <body> <div id="header"> <p>header</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1672">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680338913523.png" alt="BibiGPT-哔哔终结者">
</a>
<div class="aritcle_card_info">
<a href="/ai/1672">BibiGPT-哔哔终结者</a>
<p>B站视频总结器-一键总结 音视频内容</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="BibiGPT-哔哔终结者">
<span>28</span>
</div>
</div>
<a href="/ai/1672" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="BibiGPT-哔哔终结者">
</a>
</div>
</div> <div id="container"> <div id="content"> <h2>Content header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="side"> <h2>Side header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="clear"></div> </div> <div id="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </body></html>
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 650px; } #header{ border: 1px solid black; background-color: #666; } #content{ border: 1px solid black; background-color: #999; width: 66%; float: left; } #side{ border: 1px solid black; background-color: #999; width: 33%; float: right; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; }
side 固定宽度，content 随窗口宽度变化
side设置 width: 200px; float: left;
在content外层加入 contentWrap，contentWrap 设置为 width: 100%; margin-right: -220px; float: right;
而content 设置为 margin-right: 220px;
这样就利用了wrap实现了content的宽度为 100%-320px
HTML 结构：
<!DOCTYPE HTML><html> <head> <title>1-2-1 单列变宽</title> <meta charset="utf-8" /> </head> <body> <div id="header"> <p>header</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div> <div id="container"> <div id="contentWrap"> <div id="content"> <h2>Content header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> </div> <div id="side"> <h2>Side header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="clear"></div> </div> <div id="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </body></html>
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 700px; } #header{ border: 1px solid black; background-color: #666; } #contentWrap{ width: 100%; margin-right: -220px; float: right; } #content{ border: 1px solid black; background-color: #999; margin-right: 220px; } #side{ border: 1px solid black; background-color: #999; width: 200px; float: left; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; }
nav 固定宽度 width: 200px; float: left;
在content 和 side 外层加入两层 div：outerWrap 和 innerWrap
outerWrap 设置为 width: 100%; margin-right: -210px; float: right;
innerWrap 设置为 margin-right: 210px;
然后content 和 side 相当于在 innerWrap 内部等比例变宽
HTML结构：
<!DOCTYPE HTML><html> <head> <title>1-3-1 单侧列宽固定</title> <meta charset="utf-8" /> </head> <body> <div id="header"> <p>header</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div> <div id="container"> <div id="nav"> <h2>Nav header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="outerWrap"> <div id="innerWrap"> <div id="content"> <h2>Content header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="side"> <h2>Side header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> </div> </div> <div id="clear"></div> </div> <div id="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </body></html>
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 800px; } #header{ border: 1px solid black; background-color: #666; } #nav{ border: 1px solid black; background-color: #999; width: 200px; float: left; } #outerWrap{ width: 100%; margin-right: -210px; float: right; } #innerWrap{ margin-right: 210px; } #content{ border: 1px solid black; background-color: #999; width: 66%; float: left; } #side{ border: 1px solid black; background-color: #999; width: 33%; float: right; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; }
content 宽度固定
在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap
navWrap 设置为 width: 50%; margin-left: -210px; float: left;
nav 设置为 margin-left: 210px;
同理，sideWrap 和 side 也做类似的设置
HTML结构：
<!DOCTYPE HTML><html> <head> <title>1-3-1 中间列宽固定</title> <meta charset="utf-8" /> </head> <body> <div id="header"> <p>header</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div> <div id="container"> <div id="navWrap"> <div id="nav"> <h2>Nav header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> </div> <div id="content"> <h2>Content header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="sideWrap"> <div id="side"> <h2>Side header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> </div> <div id="clear"></div> </div> <div id="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </body></html>
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 700px; } #header{ border: 1px solid black; background-color: #666; } #navWrap{ width: 50%; margin-left: -210px; float: left; } #nav{ border: 1px solid black; background-color: #999; margin-left: 210px; } #content{ border: 1px solid black; background-color: #999; width: 400px; float: left; margin-left: 10px; } #sideWrap{ width: 49.9%; margin-right: -210px; float: right; } #side{ border: 1px solid black; background-color: #999; margin-right: 210px; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; }
nav 和 side 宽度固定
nav 设置为 width: 200px; float: left;
在 content 和 side 外层加上 outerWrap 和 innerWrap ，这样就相当于单列固定宽度的设置，nav 固定宽度
然后再在 content 外层加上 contentWrap ，也相当于在 innerWrap 内部单列固定宽度设置，side 固定宽度
HTML 结构：
<!DOCTYPE HTML><html> <head> <title>1-3-1 双侧列宽固定</title> <meta charset="utf-8" /> </head> <body> <div id="header"> <p>header</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div> <div id="container"> <div id="nav"> <h2>Nav header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="outerWrap"> <div id="innerWrap"> <div id="contentWrap"> <div id="content"> <h2>Content header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> </div> <div id="side"> <h2>Side header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> </div> </div> <div id="clear"></div> </div> <div id="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </body></html>
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 800px; } #header{ border: 1px solid black; background-color: #666; } #nav{ border: 1px solid black; background-color: #999; width: 200px; float: left; } #outerWrap{ width: 100%; margin-right: -210px; float: right; } #innerWrap{ margin-right: 210px; } #contentWrap{ width: 100%; margin-left: -110px; float: left; } #content{ border: 1px solid black; background-color: #999; margin-left: 110px; } #side{ border: 1px solid black; background-color: #999; width: 100px; float: right; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; }nav 和 content 固定宽度，side 外层加上 sideWrap ，相当于1-2-1单列变宽
HTML 结构：
<!DOCTYPE HTML><html> <head> <title>1-3-1 中列和侧列宽固定</title> <meta charset="utf-8" /> </head> <body> <div id="header"> <p>header</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div> <div id="container"> <div id="nav"> <h2>Nav header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="content"> <h2>Content header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="sideWrap"> <div id="side"> <h2>Side header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> </div> <div id="clear"></div> </div> <div id="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </body></html>
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 800px; } #header{ border: 1px solid black; background-color: #666; } #nav{ border: 1px solid black; background-color: #999; width: 200px; float: left; } #content{ border: 1px solid black; background-color: #999; margin-left: 10px; width: 400px; float: left; } #sideWrap{ width: 100%; margin-right: -620px; float: right; } #side{ border: 1px solid black; background-color: #999; margin-right: 620px; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; }
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
747
收藏
