CSS两列全屏可伸缩布局

最新推荐文章于 2024-07-16 09:10:34 发布

转载最新推荐文章于 2024-07-16 09:10:34 发布 · 1.5k 阅读

文章标签：

#css #float #div

本文介绍了一种使用CSS实现的两列全屏可伸缩布局方案，包括左侧固定右侧伸缩和右侧固定左侧伸缩两种模式，并提供了具体的HTML结构和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS两列全屏可伸缩布局

-----------------------------------------------------------------------------------------------------------------------------------------------

<div style="float:left;width:100%; background-color:#9FF;">
<div style="margin-right:200px; background-color:#CF9;">
内容内容内容内容内容<br/>
内容内容内容内容<br/>
内容内容内容<br/>
内容内容<br/>
内容<br/><br/><br/><br/><br/>
</div>
</div>

<div style="float:left;width:200px; margin-left:-200px; background-color:#C3F;">
导航导航导航导航导航<br/>
导航导航导航导航<br/>
导航导航导航<br/>
导航导航<br/>
导航
</div>

<div style="clear:left; background-color:#666;">脚</div>

-----------------------------------------------------------------------------------------------------------------------------------------------

<div style="background-color:#CCC;">
<div style="float:right; width:100%;">
<div style="margin-left:200px; background-color:#FFC;"><p>右侧栏</p><p>可伸缩宽度</p></div>
</div>
<div style="float:right; width:200px; margin-right:-200px; background-color:#9CF;"><p>左侧栏</p><p>固定宽度</p></div>
<div style="clear:both;"></div>
</div>
<hr/>
<div style="background-color:#CCC;">
<div style="float:left; width:100%;">
<div style="margin-right:200px;background-color:#FFC;"><p>左侧栏</p><p>可伸缩宽度</p><p>左侧栏</p><p>可伸缩宽度</p></div>
</div>
<div style="float:left;width:200px; margin-left:-200px;background-color:#9CF;"><p>右侧栏</p><p>固定宽度</p><p>右侧栏</p><p>固定宽度</p></div>
<div style="clear:both;"></div>
</div>