CSS是网页开发必不可少的一部分,其中盒子布局是常用的布局方式之一。如何让两个盒子竖着排列呢?下面让我们来详细介绍一下。 1.使用display属性将元素设置为块级元素 .box{ display:
CSS是网页开发必不可少的一部分,其中盒子布局是常用的布局方式之一。如何让两个盒子竖着排列呢?下面让我们来详细介绍一下。
1.使用display属性将元素设置为块级元素
.box{ display: block; }
默认情况下元素是行内元素,只有将元素设置为块级元素,才能在高度和宽度上进行自由控制。通过将两个盒子设置成块级元素,就可以使它们竖着排列了。
2.将两个盒子进行上下排列
.container{ display: flex; flex-direction: column; }
通过display:flex属性,将父元素设置为弹性盒模型,再通过flex-direction:column属性,将子元素进行上下排列。
3.使用margin或padding属性进行间距控制
.box{ margin-bottom: 10px; }
通过margin或padding属性,可以对两个盒子之间进行间距的控制。在这里我们通过设置margin-bottom属性,来使两个盒子之间间隔10像素。
通过以上三个步骤,我们就可以将两个盒子竖着排列了。
粉丝
0
关注
0
收藏
0