css 两个div占满一行

CSS可以帮助我们在网页中实现各种效果，其中两个div占满一行也是常见的布局方式之一。下面我们来介绍一下如何使用CSS实现这种布局。

    style>
        .row {
                display: flex;
                flex-wrap: wrap;
        }
        .col {
                flex: 1;
                margin: 0 5px;
        }
        /style>
    

首先，我们先在CSS中创建一个row类和col类。row类用来控制两个div在一行中占据的位置，col类则用来控制每个div的样式。

   div class="row">
            div class="col" style="background-color: #f6f6f6">
                p>
    第一个div/p>
            /div>
            div class="col" style="background-color: #cccccc">
                p>
    第二个div/p>
            /div>
        /div>
    

然后，在HTML中创建两个div，将它们放在一个row类下，并在两个div中分别添加col类。这里我们为了演示效果，还在两个div中加了不同的背景色。

代码的核心是在row类中使用了flex布局，同时设置了flex-wrap属性，这样两个div就可以占满一行了。在col类中使用了flex属性，同时设置了margin属性来控制两个div之间的距离。

通过这样的CSS和HTML代码，我们就可以实现两个div占满一行的布局了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！