在网页设计中,有时需要将两个子div垂直排列。这可以通过CSS来实现。下面我们来看一下如何实现这一效果。 .parent{ display: flex; flex-direction: column;
在网页设计中,有时需要将两个子div垂直排列。这可以通过CSS来实现。下面我们来看一下如何实现这一效果。
.parent{ display: flex; flex-direction: column; } .child1{ height: 50%; background-color: blue; } .child2{ height: 50%; background-color: red; }
以上代码中,我们首先定义一个包含两个子元素的父元素parent。然后,我们将其设置为flex布局,使得其子元素可以根据我们的需求进行布局。接着,我们设置子元素child1的高度为50%,并设置其背景色为蓝色,这样它就会在父元素中占据一半的空间。同理,我们设置子元素child2的高度为50%,并将其背景色设置为红色,使得它也可以在父元素中占据一半的空间。
这样,我们就能实现两个子div垂直排列的效果了。当然,如果我们需要更多的子元素进行垂直排列,只需要根据需求设置其高度即可。
粉丝
0
关注
0
收藏
0