CSS布局，DIV的左右三个一排，图例

1，flex弹性盒子
display: flex;
就是父级盒子采用flex布局，它的所有子元素自动成为容器成员，所有子盒子按容器属性分布。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.try{display: flex;}.try1{width: 30px;height: 30px;margin: 10px;background-color: aqua;}</style>
</head>
<body>
<div class="try"><div class="try1"></div><div class="try1"></div><div class="try1"></div>
</div>
</body>
</html>

如图：

2，float: left;浮动用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.try{/*display: flex;*/}.try1{float: left;width: 30px;height: 30px;margin: 10px;background-color: aqua;}</style>
</head>
<body>
<div class="try"><div class="try1"></div><div class="try1"></div><div class="try1"></div>
</div>
</body>
</html>

如图：

3，display:inline-block;
与float效果相似，但实际运用中各有利弊。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.try{/*display: flex;*/}.try1{float: left;width: 30px;height: 30px;margin: 10px;background-color: aqua;}</style>
</head>
<body>
<div class="try"><div class="try1"></div><div class="try1"></div><div class="try1"></div>
</div>
</body>
</html>

如图：

CSS布局，DIV的左右三个一排，图例相关推荐

html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
网页设计（二）——DIV+CSS布局1
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
html文字往右边偏移怎么做,div向右偏移设置 css让div靠右移必定距离
转自:https://www.thinkcss.com/shili/1372.shtmlcss div对象盒子向右偏移设置,使用css让div靠右必定距离-div向右移教程实例篇html div向右偏 ...
如何让div靠右_div向右偏移设置 css让div靠右移一定距离
转自:https://www.thinkcss.com/shili/1372.shtml div对象盒子向右偏移设置,使用css让div靠右一定距离-div向右移教程实例篇 div向右偏移一定距离,可 ...
div+css布局实例淘宝分析(三)(1)
在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站 ...
网页设计（三）——DIV+CSS布局2
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...

CSS布局，DIV的左右三个一排，图例

CSS布局，DIV的左右三个一排，图例相关推荐

最新文章

热门文章