[分享]css中如何让两个div并列

发布于 2024-11-11 19:23:59

CSS 中如何让两个 div 并列在网页开发中，经常会出现需要将两个 div 元素并列的情况，这时候我们可以通过 CSS 来实现。首先，在 HTML 中添加两个 div 元素：然后在 CSS ...

CSS 中如何让两个 div 并列
在网页开发中，经常会出现需要将两个 div 元素并列的情况，这时候我们可以通过 CSS 来实现。
首先，在 HTML 中添加两个 div 元素：

<br> <br>
        <div class="box1"></div><br>
        <div class="box2"></div><br>

然后在 CSS 中设置样式：

<br> <br>
        .box1 {<br>
            width: 50%;<br>
            height: 100px;<br>
            float: left;<br>
            background-color: red;<br>
        }<br>

        .box2 {<br>
            width: 50%;<br>
            height: 100px;<br>
            float: left;<br>
            background-color: blue;<br>
        }<br>

以上代码中，我们设置两个 div 元素的宽度为 50%，高度为 100 像素，同时使用 float 属性使它们排列在一行。
最后让我们来看看这两个 div 元素并列的效果：

可以看到，我们成功地将两个 div 元素并列了起来。通过使用 CSS 的 float 属性可以方便地实现这一效果。

css 教程