如何解决100%高度列表与图片容器并排时图片被挤出的布局问题？

我完全懂你遇到的困扰——把图片容器设为inline后，图片反倒被挤出去，这其实是块级元素的默认布局特性和行内元素的垂直对齐规则在捣乱，咱们一步步来搞定它：

问题根源拆解 #

你用的<div>本身是块级元素，哪怕强行设置display: inline，它还是会受行内元素的基线对齐逻辑影响。再加上你的列表是100%高度，行内元素没办法和它在垂直方向上形成稳定的排列关系，自然就把图片挤到了外部。另外如果父容器#wrapper没有明确的高度或布局规则，列表的100%高度计算也会失去参照，进一步加剧问题。

最优解决方案：Flex布局 #

Flex是处理这种侧边排列最省心的现代布局方案，只需要给父容器加一行属性，就能让列表和图片容器完美并排，同时适配高度。

修改后的完整CSS代码 #

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免不必要的滚动条 */
}

#wrapper {
  display: flex; /* 开启Flex布局，直接让子元素并排 */
  height: 100%; /* 让父容器占满视口高度，给子元素的100%高度提供参照 */
}

.project-list {
  flex: 1; /* 让列表容器自动填充剩余空间 */
  height: 100%;
  background: #f5f5f5; /* 加背景方便直观看到布局范围 */
}

#image-container {
  /* 不需要再设置inline了，Flex会自动处理排列 */
  width: 300px; /* 可以根据需求调整图片容器宽度 */
  height: 100%;
  background: #e8e8e8;
}

#image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片自适应容器且不变形，也可用contain保证完整显示 */
}

补全后的HTML结构 #

<div id="wrapper">
  <div class="project-list">
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </div>
  <div id="image-container">
    <img src="你的图片URL" alt="展示图片">
  </div>
</div>

备选方案：浮动布局（兼容旧浏览器） #

如果需要兼容不支持Flex的老旧浏览器，可以用浮动方案：

html, body {
  height: 100%;
  margin: 0;
}

#wrapper {
  height: 100%;
  overflow: hidden; /* 清除浮动，避免父容器高度塌陷 */
}

.project-list {
  float: left;
  width: calc(100% - 300px); /* 减去图片容器的宽度，保证列表占满剩余空间 */
  height: 100%;
  background: #f5f5f5;
}

#image-container {
  float: left;
  width: 300px;
  height: 100%;
  background: #e8e8e8;
}

#image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

关键注意事项 #

1. 必须给html和body设置height: 100%，否则子元素的100%高度会因为没有参照而失效；
2. 使用Flex布局时，无需再给子元素设置inline或浮动，Flex会自动处理排列逻辑；
3. 若图片比例和容器不符，object-fit属性可以帮你保证图片的显示效果，根据需求选择cover（填满容器）或contain（完整显示）即可。

这样调整后，你的列表和图片容器就能稳定并排，再也不会出现被挤出的问题啦！

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