网站开发求助：如何避免图片被侧边导航栏遮挡并合理布局？

嘿，我来帮你搞定这个问题！你的核心问题是图片没有放在专门的内容容器里，再加上侧边栏用了position: fixed（固定定位会脱离文档流，层级比普通元素高），所以图片就被挡住了。另外你的HTML结构里还有多余的闭合标签，得先清理掉。

问题根源拆解 #

• 你已经给.content设置了margin-left: 200px，用来避开宽度200px的侧边栏，但所有图片都在.content外面，自然享受不到这个边距的保护。
• 固定定位的.sidebar会悬浮在页面上层，普通流里的图片没有设置足够的左边距，就会被它覆盖。

具体解决方案 #

1. 修正HTML结构，把图片移到.content容器内

先把多余的</div>删掉，然后把所有图片放到.content的标签里，这样图片就能继承.content的左边距，自动避开侧边栏。

修改后的HTML代码：

<!-- The sidebar -->
<div class="sidebar">
  <a href="#news">Mylogo</a>
  <a class="active" href="#home">Home</a>
  <a href="#Portfolio">Portfolio</a>
  <a href="#contact">Projects</a>
  <a href="#about">About</a>
</div>

<!-- 内容容器，所有页面主体元素都要放在这里 -->
<div class="content">
  <img src="https://picsum.photos/id/1011/367/267">
  <img src="https://picsum.photos/id/1015/367/267">
  <br>
  <img src="https://picsum.photos/id/1032/367/267" alt="">
  <img src="https://picsum.photos/id/1036/367/267" alt="">
</div>

2. 优化CSS，让图片布局更合理（可选）

如果想让图片排版更整齐，不会因为换行显得杂乱，可以给.content加上弹性布局或者网格布局，比如：

body { margin: 0; font-family: "Lato", sans-serif; }
.sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; }
.sidebar a { display: block; color: black; padding: 16px; text-decoration: none; }
.sidebar a.active { background-color: #555855; color: white; }
.sidebar a:hover:not(.active) { background-color: #555; color: white; }
div.content { 
  margin-left: 200px; 
  padding: 1px 16px; 
  height: 1000px;
  /* 新增：让图片自动换行，间距均匀 */
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 图片之间的间距 */
  align-items: flex-start;
}
/* 让图片自适应容器宽度，避免溢出 */
.content img {
  max-width: calc(50% - 8px); /* 两行排列，减去一半的间距 */
  height: auto;
}
@media screen and (max-width: 700px) { 
  .sidebar { width: 100%; height: auto; position: relative; } 
  .sidebar a { float: left; } 
  div.content { margin-left: 0; }
  .content img { max-width: 100%; }
}
@media screen and (max-width: 400px) { .sidebar a { text-align: center; float: none; } }

3. 验证效果

现在图片会乖乖待在.content的区域里，左边有200px的边距避开侧边栏，而且排版更整洁。同时响应式的逻辑也能正常工作——当屏幕宽度小于700px时，侧边栏变成横向导航，.content的margin-left会重置为0，图片也会自动调整宽度适配小屏幕。

额外提醒 #

• 固定定位的元素一定要注意和其他普通流元素的布局关系，最好用一个专门的内容容器来承载所有主体内容，避免布局混乱。
• 写HTML的时候要注意标签的嵌套关系，多余的闭合标签可能会导致布局意外出错哦。

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