[网页标准化]解决背景不能延伸的问题!
如果我们的网站排版方式是纵向的,比如两列、三列(当然还可以更多)。这样的排版我们就会用到 float 例:排成三列的格局。代码如下:
<div ="content">
<div id="main">
<div id="maincol"></div>
<div id="xcol"></div>
</div>
<div id="subcol">
</div>
</div>
这里我们打算把subcol放在左侧,maincol放在中间,xcol放在右侧。CSS的写法如下:
#content{width:700px; background:url(img/bg.png)repeat-y;}
#subcol {float:left; width:200px;}
#main {width:500px; float:right;}
#maincol {width:300px;float:left;}
#xcol {width:200px; float:right;}
好像这样就没问题了!但是事实上我们可以发现背景却没有伸展的意思,这是因为背景的自适应高度并不继承float的高度,如何解决这个问题呢?如下分析:
背景会继承float底线所在容器中的位置高度,所以背景一定会找到最后一个标签去测定,这样我们在所有的float下方下如下的标签:
<div style="clear:both;"></div>
这个标签中什么也不放。也就是一个没有高度的空容器,这样它就可以把背影拉下来了。
事实上在实际操作中还是会有很多问题会出现,这就需要我们以冷静的头脑去分析与解决了!
分享到:
相关推荐
网页动画素材 无限万花筒延伸动画(抖音资料)网页动画素材 无限万花筒延伸动画(抖音资料)网页动画素材 无限万花筒延伸动画(抖音资料)网页动画素材 无限万花筒延伸动画(抖音资料)网页动画素材 无限万花筒延伸...
113-352-大数据背景下的地铁延伸线规划研究-word资料.pdf
SAN 网络存储的延伸与业务连续性解决方案,能给你提供SAN网络存储解决方案
为了落实神华集团建设"数据...给出了数据标准化项目实施的初步规划,阐述了数据架构及标准化体系规划和数据标准化路线规划,最后给出了通过建设数据共享交换平台和大数据平台,实现了对数据标准化工作成效的检验和延伸。
在目前的市场环境下,煤机维修、煤机再制造、煤矿相关...煤机延伸服务业务的发展需要相应的信息化建设支持,信息化建设应首先分析业务、然后明晰信息化建设阶段的划分、关注信息化实现的内容、规划信息化系统的组合应用。
MFC延伸对话框,延伸对话框
小蜜蜂一直致力于推出以RFID技术为核心的行业应用解决方案,然后将其产品化。当然,在RFID业务运营实践的过程中,...旨在建立成功应用模式和奠定符合法规与标准的基础架构,完善现有的RFID行业解决方案并进行延伸扩展。
目录 问题延伸解决问题总结 问题 延伸 解决问题 总结 问题 根据项目需求,我们要将下面省级地图中的个别市进行高亮(不同颜色)展示 延伸 首先跟大家介绍这个地图的展示方式: 采用的是Vue框架中运用...
20210326-广发证券-中核钛白-002145-循环延伸产业链,迎接铁锂大宗化.pdf
html5 canvas画布绘制的一款螺旋点结合线条无限延伸背景动画特效,点击鼠标左键可以暂停,再次点击继续。
介绍了泛在网络的基本概念、内涵以及网络架构,概括了泛在网感知延伸层的关键技术,重点分析了感知延伸层IP技术路线,IPv6技术感知延伸层的应用以及相关国际标准化现状。
刍议信息时代背景下高职院校图书馆延伸服务.pdf
幻灯片背景图片右下角是清晰的主体物,包括零星的绿色植物,明亮反光的绿色花盆,花盆下面的古典的旧书籍,雕花的茶碗,图片向左边延伸渐渐的模糊,隐约可见透明的光斑,飘摇的树叶,整张冷色调的图片特别唯美,别具...
大数据背景下图书馆、档案馆资源整合及服务延伸
大数据背景下图书馆、档案馆资源整合及服务延伸.pdf
一系列的创新之举不仅使长城信息建立起面向客户的核心业务流程,实现了销售驱动的采购、生产模式,提升供应链运作效率,更为长城信息注入了无限的生机与活力,一道信息化的长城正在以不可阻挡之势蜿蜒延伸。
VMWare vSAN双活延伸群集技术指南.pdf
开发背景:为适应当前信息化潮流以及公司日益扩大和延伸的业务范畴,急切需要一款适合公司实际情况的企业管理系统以管理企业日常工作,针对公司经营状况以及公司实际规模量身定制,旨在真正提高企业信息化管理水平,...
以太网网络延伸器
针对目前煤矿安全生产信息管理系统存在的信息管理手段单一、信息输入输出延迟及缺少对业务数据的挖掘分析等问题,设计了一种煤矿安全生产标准化信息管理系统。该系统通过搭建虚拟专网,直接服务于安全生产管理的全体...