CSS制作三行二列居中布局，高度自适应

江山如画 • 2018年7月29日下午12:05 • 网页制作 • 阅读 7600

本实例要制作三行二列网页布局，这是网页制作中最常见的布局方式，如何使整个页面内容居中，如何使高度适应内容自动伸缩，是本实例中的难点。

<html> <head> <style type="text/css"> body{ background:#999; text-align:center; color: #333; font-family:arial,verdana,sans-serif; } #header{ width:776px; margin-right: auto; margin-left: auto; padding: 0px; background: #EEE; height:60px; text-align:left; } #contain{ margin-right: auto; margin-left: auto; width: 776px; } #mainbg{ width:776px; padding: 0px; background: #60A179; float: left; } #right{ float: right; margin: 2px 0px 2px 0px; padding:0px; width: 574px; background: #ccd2de; text-align:left; } #left{ float: left; margin: 2px 2px 0px 0px; padding: 0px; background: #F2F3F7; width: 200px; text-align:left; } #footer{ clear:both; width:776px; margin-right: auto; margin-left: auto; padding: 0px; background: #EEE; height:60px;} </style> </head> <body> <div id="header">header</div> <div id="contain"> <div id="mainbg"> <div id="right"> <p>right</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="left"> <p>left </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </div> <div id="footer">footer</div> </body> </html>

Tips:You can change the code before run.

代码解释：

#header,#contain,#footer{
	margin-right: auto;
	margin-left: auto;
}

是让网页整体居中。为了使中间两列#right和#left也居中，我们在它们外面嵌套一个层#contain，并对contain设置margin:auto;，这样#right和#left就居中了。
注意中间两列定义的顺序，我们首先定义#right，通过float: right;让它浮在#contain层的最右边。然后再定义#left，通过float: left;让它浮动在#right层的左面。
后是定义底部的#footer层。这个定义的关键是：clear:both;，作用是取消#footer层的浮动继承。否则的话，你会看到#footer着#header显示，而不是在#right的下面。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2307.html

CSS 网页布局

赞 (1)

江山如画管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

JS实现开关效果，可单选和组选

JS实现开关效果，可单选和组选

上一篇 2018年7月29日上午8:52

CSS制作上一页下一页页码显示样式

CSS制作上一页下一页页码显示样式

下一篇 2018年7月29日下午12:30

网页制作

第2课：HTML是什么？

HTML是什么？ HTML是一门语言，它令我们可以在因特网上展示信息。你所看到的网页，是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码，只需在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。对于生手来说，HTML代码看似很复杂，不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么？如果你要制作网站的话，学习HTML是不可避免的。即…

江山如画
2018年1月20日
12.8K018
网页制作

如何单独设置打印网页的样式

做项目，有些网页需要打印，很多时候，是导出WORD或EXCEL再打印。现在需要页面直接打印，方便没有安装OFFICE的用户。需求：页面在浏览器中浏览是一种样式，要打印这个页面，是另一种样式。解决方法：用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

江山如画
2019年2月15日
3.8K00
网页制作

怎么让一长串英文字符自动换行？

长串英文字符之间没有空格，整串都显示在一行，撑破了div，甚至跑到屏幕外了，如何解决？ <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行？|www.125jz.com</title> &l…

江山如画
2019年11月20日
6.6K00
网页制作

div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

一、两个div水平顶部对齐两个div都设置display:inline-block; 并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

江山如画
2018年12月10日
9.8K00
网页制作

实现表格单线边框的两种方法

实现表格单线边框方法一 border-collapse: collapse; 代码如下： See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二给table上边和左边设上边框线，给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

江山如画
2019年10月31日
11.5K00
网页制作

css布局基础：浮动和清除浮动练习1

主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法：方法1：通过overflow属性方法2：通过clear属性方法3：通过伪元素选择器（推荐）效果图：参考： <!DOCTYPE html> &…

孙萍
2020年4月4日
7.8K00

发表回复

登录后才能评论