时间:2021-05-08
CSS两列布局,右侧固定,左侧自适应宽度
<div style="width:90%; margin:0 auto;">
<div style="width:200px; float:right;">这是右侧的内容</div>
<div style=" margin-right:210px;">这是左侧的内容,自适应宽度</div>
</div>
CSS两列布局,左侧固定,右侧自适应宽度
<div style="width:90%; margin:0 auto;">
<div style="width:150px; float:left;>这是左侧的内容 固定宽度</div>
<div style=" margin-left:160px;>中间内容,自适应宽度</div>
</div>
CSS三列布局,左右宽度固定,中间自适应宽度
<div style="width:90%; margin:0 auto;">
<div style="width:200px; float:right; >这是右侧的内容 固定宽度</div>
<div style="width:150px; float:left; >这是左侧的内容 固定宽度</div>
<div style=" margin-left:160px;margin-right:210px;>中间内容,自适应宽度</div>
</div>
三列等高布局
<style>
*{ margin:0; padding:0}
#content{overflow:hidden}
#content #left,#content #center,#content #right{margin-bottom:-10000px;padding-bottom:10000px;width:300px;float:left;}
#content #left{background:#f00;}
#content #center{background:#0ff}
#content #right{background:#f0f}
</style>
<div id="content">
<p id="left">left<br />left<br />left<br />left<br />left<br />left</p>
<p id="center">center</p>
<p id="right">right</p>
</div>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了纯CSS实现的三列布局网页效果。分享给大家供大家参考。具体分析如下:这是一个比较常用的用DIV+CSS布局的网页,包括头部、中间、一行三列布局、导
DIV+CSS网页布局第二篇:两列布局1、宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了。 当元素
DIV+CSS网页布局第四篇:混合布局1、混合布局 在了解了一列、两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在
独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局。通过DIVCSS实例CS
简单语句实现DIV+CSS分两列(多列)布局显示复制代码代码如下:.myul{width:210px;}.myli{width:100px;/*如果显示三列则w