如何实现图片居右、标题与副标题居左的页面布局？

问题描述 #

我需要为学校项目实现标题与副标题居左、图片居右的布局效果，目前编写的代码如下：

<div class = "content">
    <p class = "title">Intro to HTML</p>
    <p class = "text">Sample Subtitle</p>
        <div>
            <img class = "thumbnail" src="personalp.webp">
        </div>
</div>

实际呈现效果不符合预期，需要调整代码实现目标布局。

解决方案 #

方法1：Flexbox布局（推荐） #

这是现代前端最常用的布局方案，兼容性好且易维护。

先调整HTML结构，把标题和副标题放到统一容器里，结构更清晰：

<div class = "content">
  <div class="text-container">
    <p class = "title">Intro to HTML</p>
    <p class = "text">Sample Subtitle</p>
  </div>
  <div>
    <img class = "thumbnail" src="personalp.webp">
  </div>
</div>

再添加CSS样式：

.content {
  display: flex;
  justify-content: space-between; /* 让左右元素分开展示 */
  align-items: center; /* 垂直方向居中对齐 */
  padding: 1rem; /* 给容器加内边距，避免内容贴边 */
}

.text-container {
  flex: 1; /* 占满左侧剩余空间 */
  margin-right: 1rem; /* 和图片保持间距 */
}

.title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
}

.text {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

.thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

方法2：Float布局（兼容旧浏览器） #

如果需要适配老旧浏览器，可采用传统float方案：

HTML结构和方法1一致，添加以下CSS：

.content {
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
  padding: 1rem;
}

.text-container {
  float: left;
  width: calc(100% - 110px); /* 减去图片宽度+间距，确保不重叠 */
}

.title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
}

.text {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

.thumbnail {
  float: right;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

方法3：Grid布局 #

适合更复杂的布局场景，代码简洁直观：

HTML结构可直接使用修改后的版本，添加CSS：

.content {
  display: grid;
  grid-template-columns: 1fr auto; /* 左侧占满剩余空间，右侧自适应图片宽度 */
  gap: 1rem; /* 元素间的间距 */
  align-items: center;
  padding: 1rem;
}

.title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
}

.text {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

.thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

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