[分享]css两个长方形在同一行

CSS是网页设计中不可缺少的一部分，它能够为网页元素添加样式，美化网页界面。在实际开发中，我们经常需要让两个长方形在同一行展示，这时候我们可以借助CSS中的float属性实现。 .rectangle ...

CSS是网页设计中不可缺少的一部分，它能够为网页元素添加样式，美化网页界面。在实际开发中，我们经常需要让两个长方形在同一行展示，这时候我们可以借助CSS中的float属性实现。

 <style>
        .rectangle {
            width: 100px;
            height: 50px;
            background-color: red;
            float: left;
            margin-right: 10px; /* 设置长方形之间的距离 */
        }
    </style>

    <div class="rectangle"></div>
    <div class="rectangle"></div> 

在上面的代码中，我们定义了一个名为.rectangle的CSS样式类，它设置了宽度、高度以及背景颜色，并且使用float:left属性把两个长方形放在同一行。设置了margin-right: 10px，是为了让长方形之间有一定的间隔效果。

通过以上样式的设置，我们可以轻松的让两个长方形在同一行展示。使用float属性进行元素的布局时，需要注意清除浮动，以防止将来出现布局问题。