当前位置:首页 > 源码分享 > 技术教程 > 正文内容

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

zjsn2个月前 (05-08)技术教程125

下面方法主要用的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 火狐 谷歌等浏览器


版权声明:本文由指尖十年发布,如需转载请注明出处,如有问题可在下面留言。

本站提供的一切软件、教程和内容信息来自网络收集整理,版权争议与本站无关,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系

本文链接:https://www.zjsn.net/?id=99

分享给朋友:

“转载的CSS两列布局,三列布局方法” 的相关文章

中国移动联通电信用户如何免费开通电话防骚扰

中国移动联通电信用户如何免费开通电话防骚扰

现在的骚扰电话太多了,各种推销业务,如何屏蔽呢,看下面办法来了:移动用户:公众号“中国移动高频骚扰电话防护”点击菜单栏“业务设置”开启。电信用户:公众号“天翼防骚扰”点击菜单栏“业务设置”开启。联通用户:公众号“中国联通微厅”点击菜单栏“智慧沃服务”下拉到最底下开启。...

全国各地优势产业大全一览(原产地特产)

全国各地优势产业大全一览(原产地特产)

无论你是做电商,微商,直播带货,都需要知道各地的优势产业,下面为大家分享全国各个产业带产地搜索省流助手:羽绒服:共青城、吴江、常熟睡  衣:汕头、佛山、揭阳、普宁、中山袜  子:诸暨、江阴羊毛衫:海阳(山东)羊绒衫:清河(河北)羊绒大衣:大连泳  装:葫芦岛手 ...

宝塔Nginx环境下如何实现404打不开页面自动跳转到首页

宝塔Nginx环境下如何实现404打不开页面自动跳转到首页

因为前段时间更改了西京同城导航网站的程序,导致以前许多页面打不开,看在眼里急在心里,如何解决呢?第一步:登录宝塔后台网站设置的伪静态规则页面,一律删除以前程序用到的伪静态规则第二步:利用万能的百度后知道在配置文件中需要添加以下代码server {  location ...

站外引用头条视频和西瓜视频的方法,自己网站如何插入西瓜视频

站外引用头条视频和西瓜视频的方法,自己网站如何插入西瓜视频

遥想很多年前,还是优酷称霸视频节目的时代,我们博客站长需要引用这些网站一些视频时可以很简单的在编辑器内插入即可。优酷,土豆,酷6等众多网站每个视频下面有个站外引用链接。只需要简单的复制即可。如今自媒体时代,西瓜视频成为主流,但官方却没有提供视频站外引用办法,如何破解这个难题呢?今天给大家分享下办法。...

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

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

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

网站logo扫光效果CSS写法

网站logo扫光效果CSS写法

现在许多网站可以看到logo上一道光芒扫过的效果,这种效果最早是用flash实现,后来gif动画也可以做出来,不过现在流行的是纯CSS实现。本人也是从别人网站看到CSS写法,加到我的网站中,结果发现logo处光芒扫过超出了范围,用overflow:hidden语法也不管用,可有知道哪里问题朋友还请赐...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。