[分享]css两行两列的布局

发布于 2024-11-11 19:13:17

CSS两行两列布局是Web设计中经常用到的一种布局方式。其可以将内容分为四个块，在一屏中呈现出更多丰富的信息。下面的代码将介绍如何实现CSS两行两列布局。 .container { display: ...

CSS两行两列布局是Web设计中经常用到的一种布局方式。其可以将内容分为四个块，在一屏中呈现出更多丰富的信息。下面的代码将介绍如何实现CSS两行两列布局。

<html>
    <head>
        <style>
            .container {
                display: flex;
                flex-wrap: wrap;
            }

            .box {
                width: calc(50% - 10px);
                margin: 5px;
                padding: 10px;
                background-color: #eee;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="box">
                <p>这里是第一行第一列</p>
            </div>
            <div class="box">
                <p>这里是第一行第二列</p>
            </div>
            <div class="box">
                <p>这里是第二行第一列</p>
            </div>
            <div class="box">
                <p>这里是第二行第二列</p>
            </div>
        </div>
    </body>
</html>

代码中，我们使用了flex布局和calc计算方法来实现两行两列布局。在容器上设置display:flex和flex-wrap:wrap属性，使容器成为一个弹性盒子，并让其子元素换行。在每个盒子上设置50%的宽度（即占据两行两列中的一半，使用calc计算方法减去外边距和内边距的宽度），并添加一定的外边距和内边距，以便与其他盒子分开并留有空白。盒子的背景颜色被设置为浅灰色。

以上是CSS两行两列布局的简单实现方式，在实际应用中可以根据自己的需要进行调整和变换。希望这篇文章提供了一些启示和帮助。

css 教程