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

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

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

<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实现开关效果，可单选和组选

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

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

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

网页制作

div+css实现面包屑导航-默认竖线分隔、箭头分隔、空白分隔

div+css实现面包屑导航，主要用到了CSS3伪元素before，大家可以通过本利好好理解before的使用方法，下面125建站网给出实现代码。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> &…

江山如画
2023年1月5日
2.0K00
网页制作

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.4K00
网页制作

如何给网页中的表格table添加滚动条

最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了，就想到了给table加滚动条，接下来125建站网为大家介绍HTML给table添加滚动条的方法，有需要的小伙伴可以参考一下： 1、方法分析：要给table添加滚动条其实很简单，我们首先把table放到一个div里面，然后再设置div显示滚动条即可。 2、html代码： <div…

江山如画
2023年3月9日
2.8K00
网页制作

css布局基础：行内元素、块级元素练习

主要知识点： 1、理解什么是行内元素？什么是块级元素？ 2、知道块级元素能够设置宽高，行内元素不可设置宽高（替换元素可以）。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。扩展： 1、nth-child()选择器选择其父元素的第n个子元素。效果图：参考： <nav> <ul> <li><…

孙萍
2020年4月4日
11.9K01
网页制作

22个HTML5的初级技巧

本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。

zhrjgy
2018年3月18日
3.0K00
网页制作

CSS3 transform:rotate()制作旋转图片

在《CSS3 transition transform属性及实例详解》中我们实现了：鼠标放到图片上，图片等比例放大的效果，今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能，可以在CSS里面设定旋转的角度，也可以设定旋转用多少时间来完成。旋转图片HTML代码 <img src=…

江山如画
2019年1月29日
17.5K12

发表回复

登录后才能评论