[分享]css两个div垂直

发布于 2024-11-11 19:07:05

在网页开发中，将两个或多个

标签垂直排列是一项常见的任务。通常情况下，我们使用CSS来实现垂直排列。

  .container{
            display: flex;
            flex-direction: column;
        }

上述代码中，我们创建了一个CSS类名为.container的容器，并使用flex属性来控制其子元素的排列方式。具体来说，我们使用flex-direction属性来指定子元素的排列方向。由于我们希望子元素垂直排列，所以将其设置为column。

接下来，我们可以将两个

标签放入.container容器中，并使用CSS样式来美化这些标签。

  .box{
            background-color: #EFEFEF;
            margin-bottom: 10px;
            padding: 10px;
        }

上述代码中，我们创建了一个CSS类名为.box的样式，用于美化

标签。我们设置了背景颜色、下边距、内边距等属性。

最后，我们可以在HTML代码中使用.container和.box类名来创建垂直排列的

标签。

  <div class="container">
            <div class="box">
                第一个div
            </div>
            <div class="box">
                第二个div
            </div>
        </div>

如上述代码所示，我们创建了包含两个.box子元素的.container容器，并且这两个子元素垂直排列。

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖