如何为博客页面左侧创建侧边栏？解决Flex布局文本溢出问题

我懂你现在的困扰——搜的侧边栏教程太绕看不懂，自己试Flex布局还把主文章文本搞溢出了，就想要侧边栏在文章左侧、页面缩放时整体一起居中的效果对吧？咱们一步步把这个问题搞定：

问题拆解 #

你当前的代码有几个核心问题：

1. 没有侧边栏的HTML结构，完全没实现侧边栏布局
2. .review用了固定宽度700px，缩放时很容易超出容器
3. CSS存在语法错误（比如body和h1的闭合大括号多写了，height:100%没加分号），这些小错误会直接打乱布局逻辑

解决方案步骤 #

1. 修复基础语法问题：先把CSS里的语法错误修正，确保布局基础正常
2. 新增侧边栏结构：在HTML里加一个侧边栏容器，和主内容放在同一个父容器下
3. 用Flex实现居中布局：给父容器设置Flex属性，让侧边栏和主内容横向排列，同时父容器设最大宽度+水平居中，保证缩放时整体居中
4. 解决文本溢出：主内容去掉固定宽度，改用Flex占比自适应，配合图片自适应和文本自动换行，彻底避免溢出

修改后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<title>Once Upon A Time</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
  <div class="container">
    <div class="logo">
      <img src="logo.png" height="90" width="280" alt="Site Logo">
    </div>
    <nav>
      <ul>
        <li> <a href="#">Our Top Picks</a></li>
        <li><a href="#">Wall of Shame</a></li>
        <li><a href="#">Movies</a></li>
        <li><a href="#">Tv Shows</a></li>
      </ul>
    </nav>
  </div>
</header>

<!-- 新增Flex父容器，包裹侧边栏和主内容 -->
<div class="main-container">
  <!-- 左侧侧边栏 -->
  <aside class="sidebar">
    <h3>Sidebar</h3>
    <ul>
      <li><a href="#">Movie Categories</a></li>
      <li><a href="#">Recent Reviews</a></li>
      <li><a href="#">Top Rated</a></li>
    </ul>
  </aside>

  <!-- 主文章内容 -->
  <div class="review">
    <h1>Titanic Movie Review 1996</h1>
    <h3> -By Some random guy</h3>
    <div class="thumbnail">
      <img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
    </div>
    <p>The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere: <br> <br> Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br> These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply. <br><br> James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br> We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br> All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br> The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br> The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br> </p>
  </div>
</div>
</body>
</html>

CSS部分 #

* { box-sizing:border-box; }
@font-face{ src:url(fonts/WaywardSans-Regular.otf); font-family:wayward; }
body { 
  margin:0; 
  background: #fff; 
  font-family:wayward; 
  font-weight:100; 
  height: 100%; /* 修复语法：添加分号 */
  overflow-x: hidden; 
  overflow-y: scroll; 
} /* 移除多余的闭合大括号 */
.container { width: 80%; margin: 0 auto; }
header { background: #55d6aa; }
header::after { content: ''; display: table; clear: both; }
.logo { float: left; padding: 10px 0; margin-left:30px; }
nav { float: right; }
nav ul { margin-right: 60px; padding: 0; list-style: none; }
nav li { display: inline-block; margin-left: 100px; padding-top: 30px; position: relative; }
nav a { color: #444; text-decoration: none; text-transform: uppercase; font-size: 20px; }
nav a:hover { color: #000; }
nav a::before { content: ''; display: block; height: 5px; background-color: #444; position: absolute; top: 0; width: 0%; transition: all ease-in-out 250ms; }
nav a:hover::before { width: 100%; }
h1{ margin:10px; } /* 移除多余的闭合大括号 */
.thumbnail{ 
  margin:5px auto; /* 让图片容器居中 */
  max-width: 100%; /* 防止图片溢出容器 */
}
.thumbnail img {
  max-width: 100%; /* 图片自适应容器宽度 */
  height: auto;
}
.review { 
  flex: 1; /* 主内容占满剩余空间 */
  line-height:29.25px; 
  padding: 5px 10px; 
  text-align: center; 
  word-wrap: break-word; 
}
/* 新增Flex主容器样式 */
.main-container {
  display: flex;
  gap: 20px; /* 侧边栏和主内容之间的间距 */
  max-width: 1200px; /* 限制最大宽度，避免页面过宽 */
  width: 80%; /* 和header保持一致的宽度比例 */
  margin: 20px auto; /* 水平居中，上下留间距 */
  align-items: flex-start; /* 顶部对齐 */
}
/* 侧边栏基础样式 */
.sidebar {
  width: 250px; /* 侧边栏固定宽度 */
  background: #f0f0f0;
  padding: 15px;
  border-radius: 4px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  margin: 10px 0;
}
.sidebar a {
  color: #444;
  text-decoration: none;
}
.sidebar a:hover {
  color: #55d6aa;
}

/* 响应式适配：小屏幕自动堆叠布局 */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
    width: 95%;
  }
  .sidebar {
    width: 100%;
  }
}

核心效果说明 #

• 居中布局：.main-container通过margin:0 auto实现整体水平居中，max-width避免页面在大屏上过度拉伸
• 无溢出问题：主内容用flex:1自适应剩余空间，图片设置max-width:100%自动缩放，文本word-wrap: break-word保证长单词换行
• 响应式友好：小屏幕下自动切换为垂直堆叠，移动端也能正常浏览

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