如何将侧边栏和正文部分固定在同一行？

要将侧边栏和正文部分固定在同一行，可以使用CSS中的flexbox布局或者grid布局来实现。下面是两种方法的示例：

使用flexbox布局：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
        }
        .sidebar {
            width: 200px;
            background-color: #f1f1f1;
        }
        .content {
            flex: 1;
            padding: 20px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <!-- 侧边栏内容 -->
        </div>
        <div class="content">
            <!-- 正文内容 -->
        </div>
    </div>
</body>
</html>

在上述示例中，通过将容器设置为display: flex;，侧边栏和正文部分会自动排列在同一行。侧边栏的宽度可以通过设置.sidebar的width属性来调整，而正文部分会自动占据剩余的空间。

使用grid布局：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: 200px 1fr;
        }
        .sidebar {
            background-color: #f1f1f1;
        }
        .content {
            padding: 20px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <!-- 侧边栏内容 -->
        </div>
        <div class="content">
            <!-- 正文内容 -->
        </div>
    </div>
</body>
</html>

在上述示例中，通过将容器设置为display: grid;，并使用grid-template-columns属性指定两列的宽度，侧边栏和正文部分会被放置在同一行。侧边栏的宽度可以通过调整grid-template-columns属性中的值来实现。

以上两种方法都可以实现将侧边栏和正文部分固定在同一行的效果。具体选择哪种方法取决于项目需求和个人偏好。