其他杂项

others
其他系统相关杂项问题

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

1年前 (2024-10-09)其他杂项1445

下面方法主要用的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的解决办法。还有一个不大不小的问题,...

华为云主机重装系统、宝塔环境一点总结

华为云主机重装系统、宝塔环境一点总结

因为朋友的华为云主机出了问题,我需要给重新安装系统和做好一个企业网站。本人也是摸索学习,这里总结下经验,附宝塔官方安装教程步骤一:华为云重装系统打开网址 https://www.huaweicloud.com 登录进入弹...

如何屏蔽PetalBot蜘蛛等垃圾蜘蛛办法分享

如何屏蔽PetalBot蜘蛛等垃圾蜘蛛办法分享

本人有一个 小网站,后台可以查看蜘蛛数据,经常发现有许多国外蜘蛛爬取。作为一个面向国内特定地域用户的网站,着实用不着那些蜘蛛来消耗资源,网上找到一段Nginx配置代码,加上后很灵敏,那些国外蜘蛛第二天就不来了。 if (...

网站http/https/www/无www开头域名访问301重定向设置方法

网站http/https/www/无www开头域名访问301重定向设置方法

众所周知,根据搜索引擎的喜好,相同内容的页面最好是只有一个URL网址,一些新手站长可能不注意,自己做的网站同个网页会出现2个或者4个URL可以访问。这些网址形式如: htttp://www.nqnh.com  http://nqn...

正则表达式自学教程

正则表达式自学教程

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

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

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

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

发表评论

访客

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

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

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