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

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

zjsn2周前 (05-08)技术教程51

下面方法主要用的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两列布局,三列布局方法” 的相关文章

PbootCMS如何创建多语言企业网站(转载)

PbootCMS如何创建多语言企业网站(转载)

因为给一个做外贸的朋友制作企业网站,用到了PbootCMS,却发现系统默认只有一种中文语言,如何同时增加一个英文语言前台呢,网上搜索别人的教程,在这里引用下,当然本人也会根据实际操作经验在这里随时修改完备。一、添加多语言步骤1、在后台【系统管理】-【数据区域】添加相应的区域,具体参考默认区域注:区域...

西京同城导航网站改版修改文件备注

西京同城导航网站改版修改文件备注

以下为本人修改西京同城导航站记录备份,以防万一忘记修改的地方2022.11.22(1)手机端隐藏首页点图大图(2)手机端侧边栏点图自适应宽度(3)申请收录页面一行填写两项改为一项2022.11.23(4)增加首页侧边栏分类显示(5)修改点出图片系统自适应浏览器宽度(6)修改手机端下方单链友链一行显示...

西京同城导航站部分网站点入不会自动排第一位置bug修复办法

西京同城导航站部分网站点入不会自动排第一位置bug修复办法

昨天发现,部分网站链接点入西京同城导航站,结果不会自动排到第一位,后来咨询作者,得以修复这个bug,下面是该问题解决步骤:1. 进入宝塔面板,已安装软件,找到mysql数据库,在设置内增加一行配置代码,event_scheduler = on如下图,然后重启数据库服务让配置生效。...

人物去世网站颜色如何变灰,全站变灰代码分享

人物去世网站颜色如何变灰,全站变灰代码分享

每逢哀悼大人物去世或者一些悲伤节日,站长可能需要把网站颜色设置为灰色,今天分享下适用任何网站内的变灰代码,注意,这个代码最好是放在CSS最后面位置,以防样式被覆盖。不需要的时候去掉代码即可。<style> html { /* //以下代码通过滤镜将页面中所有的彩色...

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

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

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

西京同城导航Zblog修改内容备忘录

西京同城导航Zblog修改内容备忘录

首页每行显示数量,后台主题设置为24,屏幕大于1600px时每行显示8个,1280-1600px时显示6个,980-1280px时每行显示4个,760-980px(平板)时每行显示3个带侧边栏,小于760(手机)时每行显示2个,隐藏侧边栏。以下为参考内容,媒体查询常见的媒体尺寸设置通过媒体查询,针对...

发表评论

访客

看不清,换一张

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