其他杂项

others
其他系统相关杂项问题

转载的CSS两列布局,三列布局方法

7个月前 (10-09)其他杂项1154

下面方法主要用的display:inline-block属性,设置同行DIV宽度,另一个DIV用margin限制宽度。

转载的CSS两列布局,三列布局方法

按照文档流默认显示方法

CSS两列布局,右侧固定,左侧自适应宽度 

<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"> 

    <div style="width:200px; float:right; background:#090">这是右侧的内容</div> 

    <div style=" margin-right:210px; background:#F33">这是左侧的内容,自适应宽度</div> 

</div> 

  

  

CSS两列布局,左侧固定,右侧自适应宽度 

<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"> 

    <div style="width:150px; float:left; background:#6F0">这是左侧的内容 固定宽度</div> 

    <div style=" margin-left:160px; background:#FC0">中间内容,自适应宽度</div> 

</div> 

  

CSS三列布局,左右宽度固定,中间自适应宽度 

<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"> 

    <div style="width:200px; float:right; background:#393"> 这是右侧的内容 固定宽度</div> 

    <div style="width:150px; float:left; background:#F60 ">这是左侧的内容 固定宽度</div> 

    <div style=" margin-left:160px;margin-right:210px; background:#6C3;">中间内容,自适应宽度</div> 

</div>div+css 常用两栏/三种自动适应宽度分栏 兼容ie6\7\8\9 火狐 谷歌等浏览器



版权声明:本文由贝联科技发布,如需转载请注明出处,如需分享可点击上方生成海报按钮。

分享给朋友:

相关文章

Zblog搜索无结果时增加一个友好提示

Zblog搜索无结果时增加一个友好提示

Zblog是个不错的博客程序,但官方不知道怎么回事不去用心完善一些基本功能,我使用时就频频发现一些缺陷bug,都有些怀疑官方故意如此是为了卖付费插件增加收入。上次发了通过修改js文件,避免前台空搜索bug的解决办法。还有一个不大不小的问题,...

正则表达式自学教程

正则表达式自学教程

因为本人有时需要批量替换改写文章,简单的关键词替换不能满足需求,不得不学习正则表达式,作为一个新手,这里记录一些正则规则和遇到的问题。 一、正则常用到符号含义1.1.第一批正则学习[]匹配列表之中的任何单个字符.例如,"...

WIN10系统Edge浏览器如何启用IE模式访问网银网站

WIN10系统Edge浏览器如何启用IE模式访问网银网站

因为本人需要和长安银行每季度进行网银对账,每每碰到Win10系统不好登录长安银行网银网站问题,在此分享解决办法。不得不说这些银行真的落伍,什么年代了还让客户必须用IE浏览器访问你的网站才可以登录。微软公司启用了谷歌内核的Edge浏览器,不再...

win10系统如何删除任务栏图标残留

win10系统如何删除任务栏图标残留

本人win10电脑上装过一些软件后已删除,但是发现在“选择哪些图标显示在任务栏上”里面仍然存在这些软件名字,让完美倾向者看着非常难受。网上搜索发现不少人也遇到这问题,并提出了解决方法。我参照一个方案进行操作,发现没起作用。后来经过反复对比,...

pbootcms多语言建站常见问题(转载)

pbootcms多语言建站常见问题(转载)

一、如何搭建多语言站?多语言/区域建站用于使用同一个后台建立多语言网站。1、使用步骤1)在后台”系统管理>数据区域”添加相应的区域,具体参考默认区域;2)将多语言的模板放入模板目录,不同语言的模板均放在template目录下;3)在后...

苹果手机屏蔽iOS18系统更新方法+描述文件免费下载

苹果手机屏蔽iOS18系统更新方法+描述文件免费下载

屏蔽IOS18系统更新说明苹果手机有很不错的用户体验,但苹果IOS系统总是提示自动更新,对一些有特殊版本需求的朋友来说,这点就很讨厌了。贝联科技在此分享苹果IOS系统屏蔽自动更新18系统的最新办法和描述文件,希望对您有所帮助。特别说明,本方...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
现在,非常期待与您的又一次邂逅

我们努力让每一次邂逅总能超越期待

智能客服
欢迎咨询智能客服,我可以回答些简单问题