如何使用div优雅的布局

flex布局

方式1，float飘起来~
方式2，使用flex，将多个div合并到一行

就是跨行和跨列嘛…
如果表格做就easy…
但是, div是块级标签，每个div会独占一行…

方式1，float飘起来~

下面的两个div会到一行…

<div> <div style="float:left;">div1</div><div style="float:left;">div2</div>
</div>

但是这个有局限性的… 要调宽高度…
虽然使用flot:left 向某个方向飘简单许多，如果一行飘了多个div，每个的div的宽高都需要考虑如何布局才能整齐。

方式2，使用flex，将多个div合并到一行

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>div flex demo</title><style>/*使用flex样式，将多个div合并为一行~*/.mainDiv {display: flex;background-color: aquamarine;}div {border: 0.1px solid black;}</style></head><body><div class="mainDiv" style="width: 100%;"><!--left--><div style="width:75%;"><div class="mainDiv" style="height: 100px;"><div style="width: 33.3%;">div1</div><div style="width: 33.3%;">div2</div><div style="width: 33.3%;">div3</div></div><div class="mainDiv" style="height: 100px;"><div style="width: 50%;">div4</div><div style="width: 50%;">div5</div></div></div><!--right--><div style="width:25%;height: 200px;">div6</div></div> <hr /></body>
</html>

如何使用div优雅的布局相关推荐

table和div在页面布局上应该注意的问题
在这篇文章开篇,我先纠正一下我之前写的一篇入门文章的错误,还是先引用一下比较官方的说法吧,避免再次误导各位新手 " <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行 ...
典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...
html5--1.18 div元素与布局
1.18 div元素与布局 1.元素的分类 2.div元素与布局 1.元素的分类块元素:主要特征是会产生换行效果,自动与其他元素分离成两行:通常可以作为容器在内部添加其他元素. 已经学过的块元素有: ...
DIV与Table布局在大型网站的可用性比较
DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就 ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo.导航条).中部(页面主要内容.左右栏目).底部(制作方介绍.超链接).这是非常基础的一篇引入性文章,采用案 ...
[html] 使用div+css进行布局有什么好处？
[html] 使用div+css进行布局有什么好处? 我记得刚学的是时候,说最一开始用的是table去实现布局的.HTML语义标签还是挺多的,就是div打发好啊个人简介我是歌谣,欢迎和大家一起交流 ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
轻松学DIV教程（div＋css布局）
我爱棒棒糖! 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语 ...

如何使用div优雅的布局

flex布局

方式1，float飘起来~

方式2，使用flex，将多个div合并到一行

如何使用div优雅的布局相关推荐

最新文章

热门文章