css3实现多栏布局的方法：1、利用float实现多栏布局；2、利用inline-block盒模型实现多栏布局；3、利用“display: flex”弹性布局实现多栏布局；4、利用“display: table”方式实现多栏布局。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css实现多栏布局的几种方式
假如把下面的三个div显示在同一行
<div id="parent">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</div>
1：float实现多栏布局
float属性控制目标HTML组件是否浮动以及如何浮动。设置该属性过后，对象会被当做块组件处理。float的取值一共有四个：left（向左浮动）、Right（向右浮动）、none（不浮动）、inherit（继承父元素值），将box1,box2,box3都设置成向左浮动，浮动元素的下一个兄弟元素如果也设置了同一浮动方向，则会紧随改元素显示。
设置了float之后，元素会脱离普通文档流。它们的父元素也不会被撑开，所以#parent的高度此时为0。
#parent>div{
border:1px solid black;
float:left;
width:200px;
height:200px;
text-align: center;
}
#box1{
background-color:red;
}
#box2{
background-color:yellow;
}
#box3 {
background-color:blue;
}我们也可以这样，将box1,box2,设置成向左浮动，box3不浮动。由于box1,box2设置了浮动之后脱离了普通文档流。对box3来说就像前面不存在box1,box2一样，box3也会显示在这一行，但是会被box1遮挡住。设置box3的 margin-left:400px;可以让它看起来像是显示在box1,box2后面。这个时候#parent被box3撑开，高度此时为202px。
#parent>div{
border:1px solid black;
width:200px;
height:200px;
text-align: center;
}
#box1{
float:left;
background-color:red;
}
#box2{
float:left;
background-color:yellow;
}
#box3 {
margin-left:400px;
background-color:blue;
}2：inline-block盒模型
inline-block盒模型的元素既不会占据一行，同时也支持用width、height指定宽度和高度。display:inline-block 将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。通常需要设置vertical-align：top使其顶端对齐。
#parent>div{
display:inline-block;
border:1px solid black;
width:200px;
height:200px;
text-align: center;
}
#box1{
background-color:red;
}
#box2{
background-color:yellow;
}
#box3 {
background-color:blue;
}inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。把空格去掉间隙自然就会消失，这样就不会显示间隔。
<div id="parent">
<div id="box1">1</div><div id="box2">2</div><div id="box3">3</div>
</div>3：display: flex 弹性布局
设置#parent容器的 diaplay:flex;父容器相当于一个弹性盒子。里面的div会按照flex-direction设置的模式排列。Flex弹性布局的功能就比较强大了，可以为盒状模型提供最大的灵活性实现复杂的布局，任何一个容器都可以指定为 Flex 布局。flex-direction属性决定主轴的方向，flex-direction: row;表示在父容器里横向排列，flex-direction: column;表示在父容器里纵向排列。
#parent{
display: flex;
flex-direction: row;
}
#parent>div{
border:1px solid black;
width:200px;
height:200px;
text-align: center;
}
#box1{
background-color:red;
}
#box2{
background-color:yellow;
}
#box3 {
background-color:blue;
}4：display: table
display:table 设置了该属性的元素作为块级表格来显示,类似
| 和 | 可以用这一系列table-row-group、table-header-group、table-footer-group、table-row等用其他标签实现类似于表格的布局。 #parent{
display: table;
}
#parent>div{
display:table-cell;
border:1px solid black;
width:200px;
height:200px;
text-align: center;
}
#box1{
background-color:red;
}
#box2{
background-color:yellow;
}
#box3 {
background-color:blue;
}登录后复制 以上是css3实现多栏布局有哪几种方法的详细内容。更多信息请关注PHP中文网其他相关文章！ 本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
使用网格创建此特定设计：分步指南
我正在尝试创建一个类似于此图像的布局，我尝试过使用此网格但无法实现。<ulclass="container"><liclass="f...
来自于 2024-04-06 20:29:08
0
2
492
强制刷新是Next.js中访问未定义路径或错误页面的后果
访问未定义的路径或错误页面会导致Next.js进行硬刷新，从而导致我的上下文回到默认状态（即存储在userProfile状态变量中的值变为null）我有一个布局，使用{stuctu...
来自于 2024-04-05 08:32:46
0
1
400
Shopware 6 插件：如何删除布尔配置并将其迁移到多选配置
我有一个Shopware6插件，当前使用布尔配置reviewSkipModeration值，该值自动发布通过插件提交的任何评论：config.xml<input-fieldt...
来自于 2024-04-03 23:09:28
0
1
410
如何从多个画布导出 jpg
我有多个画布，这些画布用作图层。canvasc1=backgroundimage.canvasc2=charactorimage.canvasc3=itemimage.我的源代码如...
来自于 2024-04-03 21:02:43
0
1
319
css中网格布局中的盒子协议
我希望前两个框以最大宽度向上，第二个框以最大宽度向下，这是代码。这是CSS代码：/*StartServices*/.services{padding-top:var(--secti...
来自于 2024-04-03 16:36:04
0
2
334
热门教程
更多>
|
|---|
