DIV布局之道一：DIV块的水平并排、垂直并排

DIV布局网页元素的方式主要有三种：平铺（并排）、嵌套、覆盖（遮挡）。本文先讲解平铺（并排）方式。

1、垂直平铺（垂直排列）

请看如下代码

CSS部分：

CSS Code 复制内容到剪贴板

.lay1{ width:200px; height:20px; border:1px solid #FF6699;}
.lay2{ width:200px; height:20px; border:1px solid #FF6699;}
.lay3{ width:200px; height:20px; border:1px solid #FF6699;}

HTML部分：

XML/HTML Code 复制内容到剪贴板

<div class="lay1"></div>
<div class="lay2"></div>
<div class="lay3"></div>

我们看到这里有三个DIV块，三个DIV块呈上下并列分布，这种方式就是常见的DIV “ 垂直平铺方式”，也是最为常见的布局网页的方式，预览效果：

我们可以看到网页中有三个“方块”呈上下排列。

2、水平平铺（水平排列）：

我们要让上例中的三个DIV块呈水平排列该如何改写代码呢？其实只要我们相应的样式中加一个float:left 即可：

CSS部分：

CSS Code 复制内容到剪贴板

.lay1{ width:100px; height:20px; border:1px solid #FF6699; float:left}
.lay2{ width:100px; height:20px; border:1px solid #FF6699; float:left}
.lay3{ width:100px; height:20px; border:1px solid #FF6699; float:left}

HTML部分无需任何修改，预览效果：

这个时候，就把三个DIV块水平平铺了。不难吧？

转载于:https://www.cnblogs.com/minghualiyan/p/3559950.html

DIV布局之道一：DIV块的水平并排、垂直并排相关推荐

html div布局位置横,div位置布局 CSS实现DIV居中对齐 div居右对齐 div居左对齐
使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实现DIV对齐用到关键属性有两个,一个为float一个为margin. ...
字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06fontbackground
目录一.字体族二.图标字体简介(font awesome的使用) 三.图标字体的其他使用方式四.iconfont 五.行高六.字体的简写属性七.文本的水平和垂直对齐八.其他的文本样式九. ...
DIV布局之道二：DIV块的嵌套，DIV盒子模型
本文讲解DIV块布局的第二种使用方式:嵌套."DIV嵌套"在有些文献中也被称为"盒子模型",说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块) ...
CSS布局：设置图片在DIV中上下左右居中(水平和垂直都居中)
CSS布局实例,这个例子相信很实用,让一个图片在Div容器中上下.左右都居中,也就是水平和垂直都居中,有用吧,平时遇到的机率挺高的,下面结合CSS和HTML来实现这个演示,请参见代码: <sty ...
div块内的CSS中心文本（水平和垂直）
我将div设置为display:block ( height和width 90px ),并且里面有一些文本. 我需要文本在垂直和水平方向上居中对齐. 我尝试了text-align:center ,但是 ...
DIV布局的设置（水平或者垂直居中）
HTML 代码 <ul><li><div class="list"><div><img src="/imgs/tua ...
html5 居中布局,div 布局水平居中篇
div 机关程度居中篇有的阅读器默许下div 居中的,但有的阅读器div靠左的,如何让DIV 机关居中呢? 枢纽DIV居中CSS代码: margin:0 auto 记取不是margin:auto d ...
左右居中_008布局题：div垂直居中，左右10px，高度始终为宽度一半
问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%.同时div中有一个文字A,文字需要水平垂直居中. 思路一:利用height:0; padding-bot ...
JavaScript-页面布局-div布局-盒子模型
文章目录 1.盒子模型 2.定位方式 3.排列属性-float和clear 4.块和内联属性 5.作者答疑在使用Html构建界面时,最关键的标签是div,这是一个有着各种属性的块状标签,能够以绝 ...

DIV布局之道一：DIV块的水平并排、垂直并排

DIV布局之道一：DIV块的水平并排、垂直并排相关推荐

最新文章

热门文章