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>
CSS+DIV实现两列布局实例代码
原创
©著作权归作者所有:来自51CTO博客作者zhanglb12的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
CSS基本布局理解——WEB开发系列38
对CSS学习已经接近尾声,下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。
css3 基本布局 web前端 HTML 百度 -
css+div布局案例
给最外层的div命名一个class有针对性的进行css布局。 填写表格 姓名: 手机: ...
css布局 5e 表单 数据 执行顺序 -
CSS+DIV布局入门
所有的设计第一步就是构思,构思好了
div css class float html -
CSS+DIV布局之道
ascript或图片来实现同样效果更加节省代码(CSS可以结
css css+div 浏览器兼容 导航菜单 分块