css 自适应高度的两列页面布局实现方法

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:29 我要评论(0)

如果你想在两列或三列布局中设置边框,你会发现边框只会延伸到content的高度,解决这个问题也可以用背景图片来让它看起来像边框。

最大宽度的样式

通过将 “margin: 1em 5%” 修改为 “margin: 0” 可以很容易的切换到最大宽度的样式

代码如下

复制代码

#container

{

margin: 0; /* changed from 1em 5% */

background-color: #FFF;

background-image: url(background.jpg);

background-repeat: repeat-y;

border: 1px solid #333;

}

右侧导航的样式

通过修改 nav 为 float: right ,然后将背景图片右对齐,我们很容易的切换到右侧导航的样式。

代码如下

复制代码

#container

{

margin: 1em 5%;

background-color: #FFF;

background-image: url(background.jpg);

background-repeat: repeat-y;

border: 1px solid #333;

background-position: right; /* ADD THIS RULE */

}

#nav

{

float: right; /* WAS FLOAT LEFT */

width: 160px;

margin-right: 10px; /* WAS MARGIN-LEFT */

padding-top: 1em;

}

#content

{

padding-top: 1em;

margin: 0 200px 0 2em; /* SWAP ORDER */

}

实例

代码如下

复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"http://www.111cn.net><html

lang="en"><head><meta

http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>自适应高度的两列页面布局(Two columns with colour)示例12 | CodeBit.cn</title>

<style type="text/css" media="screen">body{margin:0;padding:0;font-family:georgia,times,"times new roman",serif;color:#000;background-color:#ddd}#container{margin:1em

5%;background-color:#FFF;background-image:url(/wp-content/uploads/examples/two-columus-with-color/images/variation1.gif);background-repeat:repeat-y;border:1px

solid #333}#banner{background-color:#666;border-bottom:1px solid #333}#banner

h1{margin:0;padding: .5em}#nav{float:left;width:160px;margin-left:10px;padding-top:1em}#nav

p{margin-top:0}#content{padding-top:1em;margin:0

2em 0 200px}#content

h2{margin-top:0}#footer{clear:both;background-color:#666;padding:1em;text-align:right;border-top:1px solid #333}</style>

</head><body><div

id="container"><div

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...