HTML/CSS博客布局问题：文章与侧边栏背景色设置异常求助

嘿，刚接触HTML/CSS遇到布局问题太正常啦，别着急，咱们一步步把问题捋清楚～

问题根源分析 #

你的核心问题是文章容器.box-post没设置合适宽度，再加上侧边栏用float:right脱离了正常文档流，导致.box-post默认占满父容器的全部宽度，所以白色背景会铺满整行，超出了你实际想要的文章内容区域。另外，浮动元素还容易引发父容器高度塌陷的问题，也会干扰布局效果。

解决方案 #

咱们用更现代、更可控的Flexbox布局来实现你要的「中间文章+右侧两个侧边栏」效果，比用float更直观，也不容易踩坑。下面是修改后的完整代码：

1. 优化后的CSS代码

/* 全局样式重置，消除浏览器默认边距/内边距，让布局更可控 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { 
    background-color: rgb(243, 243, 243);
    padding: 0 20px; /* 给页面两侧留些空白，避免内容贴边 */
}

/* 头部样式调整 */
.main2 {
    background-color: white;
    padding: 40px;
    text-align: center;
    margin-bottom: 20px;
}

.main {
    margin-top: 0; /* 去掉原来的负margin，避免头部偏移 */
}

hr {
    margin: 20px 0;
}

/* 整体布局容器，用Flexbox实现横向排列 */
#main {
    display: flex;
    gap: 20px; /* 文章和侧边栏之间的间距 */
    align-items: flex-start; /* 让顶部对齐，避免侧边栏被拉长 */
}

/* 文章容器 */
.box-post {
    background: white;
    padding: 20px;
    flex: 2; /* 让文章占据更多宽度，比例可根据需求调整 */
}

.main-image {
    width: 100%; /* 图片自适应容器宽度 */
    height: auto; /* 保持图片原有比例 */
    margin-bottom: 20px;
}

/* 侧边栏容器 */
.sidebar {
    flex: 1; /* 侧边栏占据较少宽度 */
    display: flex;
    flex-direction: column;
    gap: 20px; /* 两个侧边栏模块之间的间距 */
}

/* 单个侧边栏模块样式 */
.side-module {
    background: white;
    padding: 20px;
    text-align: center; /* 内容居中，你也可以改成右对齐 */
}

.sideimage {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.sidetext {
    text-align: left; /* 调整文本对齐，更易阅读 */
}

2. 调整后的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
    <div class="main2">
        <h1 class="main">
            <strong>Dopetrope</strong>
        </h1>
    </div>
    <hr>
</header>

<section id="main">
    <!-- 中间文章区域 -->
    <article class="box-post">
        <img class="main-image" src="pic01.jpg" alt="obrazocek">
        <header>
            <h1>Right sidebar</h1>
            <h3>Lorem ipsum dolor sit amet feugiat</h3>
        </header>
        <p>
            Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante <br> dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at <br> accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, <br> id egestas diam justo adipiscing ante. Pellentesque tempus nulla non urna eleifend ut ultrices nisi <br> faucibus. <br><br><br>
            Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante <br> nisl, a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis <br> justo vel mattis. placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, <br> enim neque fringilla nunc, eget faucibus lacus sem quis nunc suspendisse, nec lectus sit amet <br> augue rutrum vulputate ut ut mi. Aenean elementum, mi sit amet portittor lorem ipsum dolor sit <br> amet, consecteur adipiscing elit. Lorem ipsum dolor sir amet nullam consequat feugiat dolore <br> tempus.
        </p>
    </article>

    <!-- 右侧侧边栏区域 -->
    <div class="sidebar">
        <div class="side-module">
            <img class="sideimage" src="pic09.jpg">
            <h1>Sed etiam lorem nulla</h1>
            <p class="sidetext">
                Lorem ipsum dolor sit amet sit veroeros <br> sed amet blandit consequat veroeros <br> lorem blandit adipiscing et feugiat <br> phasellus tempus dolore ipsum lorem <br> dolore.
            </p>
        </div>
        <!-- 第二个侧边栏模块，可自行添加内容 -->
        <div class="side-module">
            <h1>Another Sidebar</h1>
            <p>Add your content here</p>
        </div>
    </div>
</section>
</body>
</html>

关键修改点说明 #

• 用Flexbox替代float：#main设置为display:flex，自动实现文章和侧边栏的横向排列，彻底避免浮动带来的文档流混乱问题。
• 全局样式重置：消除浏览器默认的边距和内边距，再加上box-sizing:border-box，让内边距和边框不会额外增加元素宽度，布局更精准。
• 自适应图片：给图片设置width:100%，让它自动适配容器宽度，不会超出范围。
• 模块化侧边栏：用.sidebar包裹两个侧边栏模块，结构更清晰，后续维护也更方便。

修改完成后，文章区域的白色背景就只会包裹文章内容，右侧的两个侧边栏也会整齐排列在旁边，完全符合你期望的效果啦～

内容的提问来源于stack exchange，提问作者Mitrixsen