Div+CSS构建三行三列框架

要构建的框架如图所示：

方法一：使用div的浮动窗口属性
显然，页面布局到下是三层结构，中间的div包含三个小div；因为div是块元素，占用文档流的一行空间，要使一行中出现多个div，需要为div设置浮动样式。代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">#header{background-color: aquamarine;height: 120px;}         #main{background-color: antiquewhite;height: 120px;}#footer{background-color: blueviolet;height: 120px;}#left{width: 30%;height: 120px;background-color: burlywood;float: left;}#center{width: 40%;height: 120px;background-color: brown;float: left;}#right{width: 30%;height: 120px;background-color: chartreuse;float: right;}           </style><title></title></head><body><div id="header">            </div>        <div id="main"><div id="left">    左窗口</div><div id="center">中间窗口</div>   <div id="right">               右窗口</div></div>     <div id="footer">          </div>        </body>
</html>

方法二：因为div被设置成浮动元素之后，就不会占用文档流中的位置，所以是否可以让左边的div向左浮动，右边的div向右浮动，中间的div不设置浮动，，左右两边div悬浮与自己div的上方，而仅仅设置中间div的padding填充属性。具体代码如下：
这里要注意的是，三个div的放置顺序，一定要是先左右两边的div，然后放置中间的div，不然会引起混乱。（我的理解是正常元素可能会忽略浮动元素的位置，但是浮动元素并不能忽略正常元素的位置，如果理解错误，以后在改正）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">#header{background-color: aquamarine;height: 120px;}         #main{background-color: antiquewhite;height: 120px;}#footer{background-color: blueviolet;height: 120px;}#left{width: 30%;height: 120px;background-color: burlywood;float: left;}#center{/*width: 40%;*/height: 120px;background-color: brown;padding-left: 0px 30%;/*左右两边填充30%的位置，用来显示两边的div*/}#right{width: 30%;height: 120px;background-color: chartreuse;float: right;}           </style><title></title></head><body><div id="header">            </div>        <div id="main"><div id="left">                </div><div id="right">               </div><div id="center">              </div>            </div>        <div id="footer">          </div>        </body>
</html>

Div+CSS构建三行三列框架相关推荐

div+css经典三行两列布局
写在前面在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
金典 DIV+CSS 3行2列布局详解--企业网站通用的基本布局详解
我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...
html列自动变高,HTML_CSS三行三列DIV高度自适应的设置，用脚本控制三行三列div高度自 - phpStudy...
CSS三行三列DIV高度自适应的设置用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100%就可实现高度自适应 ...
c语言学习-在一个三行三列的矩阵中求出数值最大的元素及其行／列下标并打印输出
在一个三行三列的矩阵中求出数值最大的元素及其行/列下标并打印输出程序流程图: 代码: #include<stdio.h> void main() {int a[3][3]; int i= ...
Android Studio：如何使用网格布局将整个界面等比分为三行三列
刚开始接触android开发,还在摸索基础控件.老师说解决了一个问题就要记录下来以防以后遗忘,所以这里小小记录一下碰到的问题. 课本上的一道题目:怎么将界面等比分为三行三列,显示一个红色的" ...
css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
DIV+CSS实操三：经管系网页内容模块添加标题栏和版权信息模块
我们继续接着DIV+CSS实操一:经管系网页总体模块布局和DIV+CSS实操二:经管系网页添加导航栏和友情链接栏这个系列的博文做经管系网页.这一次我们所要做的就是给内容版块添加标题栏,还有就是给制作 ...
css表格文字超数量就竖排_CSS文字竖排 DIV CSS文字垂直竖列排版显示如何实现？...
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

Div+CSS构建三行三列框架

Div+CSS构建三行三列框架相关推荐

最新文章

热门文章