css中两行布局方法

一种常见的CSS布局方法是使用两行布局。这种布局方法可以将页面的内容分为上下两部分，上部分通常用于显示导航栏、标题或者广告，下部分则用于显示主要内容。下面我将详细讲解两种实现两行布局的方法。

第一种方法是使用绝对定位。我们可以将上部分的容器设置为绝对定位，并设置其宽度为100%，高度为固定值。下部分的容器则设置为相对定位，并将其上边距设置为上部分容器的高度。这样，下部分容器就会出现在上部分容器的下方。

示例代码如下：

<style>
    .container {
        position: relative;
    }
    .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background-color: #f2f2f2;
    }
    .bottom {
        position: relative;
        margin-top: 100px;
        background-color: #fff;
    }
</style>
<div class="129f-3fa8-ba92-10bf container">
    <div class="3fa8-ba92-10bf-2283 top">
        <!-- 上部分内容 -->
    </div>
    <div class="ba92-10bf-2283-cb49 bottom">
        <!-- 下部分内容 -->
    </div>
</div>

第二种方法是使用flex布局。我们可以将容器设置为flex布局，并将其方向设置为垂直方向。然后，我们可以使用flex属性来控制上下两部分容器的占比。通过设置上部分容器的flex属性为固定值，下部分容器的flex属性为1，我们可以使下部分容器占据剩余空间。

示例代码如下：

<style>
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .top {
        flex: 0 0 100px;
        background-color: #f2f2f2;
    }
    .bottom {
        flex: 1;
        background-color: #fff;
    }
</style>
<div class="2283-cb49-a205-7681 container">
    <div class="cb49-a205-7681-32cd top">
        <!-- 上部分内容 -->
    </div>
    <div class="a205-7681-32cd-4687 bottom">
        <!-- 下部分内容 -->
    </div>
</div>

需要注意的是，以上两种方法都可以实现两行布局，但使用flex布局的方法更加灵活，可以根据需要进行更多的布局调整。flex布局还可以配合其他属性和方法，如align-items、justify-content等，进一步控制布局效果。