HTML/CSS实现双列布局时图片显示不全、顶部文本无法居中问题求解

1. 左侧图片无法显示/显示不全 #

• 承载背景图的#bg是空的p标签，无任何内容，浮动元素未显式设置高度时默认高度为0，没有可视区域可以展示背景图。
• background-size: cover会按照元素宽高比例裁剪背景图，如果你需要完整显示整张图，应该改为background-size: contain，同时补充background-repeat: no-repeat、background-position: center配置。

2. 顶部文本偏移无法居中 #

• 顶部文本未被包裹在独立块级元素中，属于普通行内内容，和后续浮动p元素处于同一个布局上下文，浮动元素脱离文档流的特性会导致行内文本出现环绕效果，破坏居中对齐。
• 你没有清除p标签的默认margin，两个p均设置了width: 50%，加上默认margin后总宽度超过父元素100%，导致第二个p无法和第一个p并排，布局错乱进一步挤压了顶部文本的位置。

以下是完整可运行的修复后代码，保留了你原本的float实现逻辑，所有文本已翻译为中文：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

#outer {
  text-align: center;
  font-weight: bolder;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  border: 3px solid maroon;
  min-height: 400px; /* 改为min-height适配内容高度 */
}

.top-text {
  padding: 10px 0; /* 给顶部文本加上下间距 */
}

p {
  width: 50%;
  float: left;
  padding: 10px;
  height: 400px; /* 给两个p设置统一高度，保证图片有足够展示空间 */
  overflow-y: auto; /* 文本过长时自动出现滚动条 */
}

#bg {
  background-image: url(downloaded.jpg);
  background-size: cover; /* 要完整显示整张图就改成contain */
  background-repeat: no-repeat;
  background-position: center;
}

/* 清除浮动，避免父元素高度塌陷 */
#outer::after {
  content: "";
  display: block;
  clear: both;
}

<h1>CSS 背景属性讲解</h1>
<div id="outer">
  <!-- 顶部文本用独立块级元素包裹 -->
  <p class="top-text">使用CSS元素非常有趣。</p>
  <p id="bg">
  </p>
  <p id="inner">
    本讲我们将学习如何通过浮动来定位元素。掌握正确的浮动方法是必备的前端技能，这一定程度上是因为当前绝大多数网页UI都是通过浮动元素实现的。实际上，本讲结束后我们就可以实现一个双列弹性布局，在浏览器窗口伸缩时，列宽也会跟着自适应调整。接下来我们打开代码编辑器看看具体实现。
    现在我们在Sublime Text中打开名为floating-before.html的文件，先快速过一下这个HTML文档的结构：最上方是h1标题说明页面主题，然后是一个div容器，里面有四个p标签和一个带文本的section标签，p标签的ID分别是p1、p2、p3、p4。我们给div设置了浅蓝背景，每个p标签都设置了宽高50px、1px的边框，为了区分每个p元素，我们给它们设置了不同的背景色。现在我们打开浏览器看看效果。
  </p>
</div>

额外优化建议 #

如果不需要兼容旧版浏览器，更推荐用flex布局实现双列效果，不需要处理浮动塌陷、元素对齐等问题，代码更简洁。

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