如何使用HTML和CSS实现图片与文本的侧边对齐？

下面提供几种实用的方法来解决你的问题，让文本和图片并排显示：

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

这是现代网页布局的首选方式，简洁且兼容性好。通过将文本和图片包裹在一个弹性容器中，轻松实现横向排列：

/* 弹性容器，控制子元素排列 */
.content-container {
  display: flex;
  gap: 20px; /* 文本与图片的间距 */
  margin: 10px 275px 100px; /* 容器的上下左右外边距 */
  align-items: flex-start; /* 让文本和图片顶部对齐 */
}

/* 文本块样式调整 */
p.boxed {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: justify;
  text-justify: inter-word;
  font-family: "Courier New";
  font-weight: bold;
  color: white;
  flex: 1; /* 文本块自动填充剩余空间 */
  margin: 0; /* 移除原有的冗余外边距 */
}

/* 图片容器样式调整 */
p.image1 {
  margin: 0; /* 移除原有的冗余外边距 */
}

/* 图片自适应 */
p.image1 img {
  max-width: 100%;
  height: auto;
}

<div class="content-container">
  <p class="boxed">placehooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooolder text</p>
  <p class="image1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Orchid_-_Stierch.jpg/330px-Orchid_-_Stierch.jpg" alt="Orchid performing in 2000"></p>
</div>

方法2：Float属性（传统兼容方案） #

如果需要兼容旧版浏览器，可以使用浮动属性实现：

/* 文本块样式调整，右侧预留图片空间 */
p.boxed {
  background-color: rgba(0, 0, 0, 0.7);
  margin: 10px 350px 100px 275px;
  padding: 10px;
  text-align: justify;
  text-justify: inter-word;
  font-family: "Courier New";
  font-weight: bold;
  color: white;
}

/* 图片设置右浮动 */
p.image1 {
  float: right;
  margin: 10px 275px 100px 20px;
}

/* 图片固定宽度 */
p.image1 img {
  max-width: 330px;
  height: auto;
}

/* 清除浮动，避免影响后续元素布局 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<div class="clearfix">
  <p class="image1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Orchid_-_Stierch.jpg/330px-Orchid_-_Stierch.jpg" alt="Orchid performing in 2000"></p>
  <p class="boxed">placehooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooolder text</p>
</div>

方法3：Grid布局 #

适合更复杂的排版场景，通过网格列定义实现精准排列：

/* 网格容器 */
.content-container {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列自适应，第二列随图片宽度调整 */
  gap: 20px;
  margin: 10px 275px 100px;
  align-items: flex-start;
}

/* 文本块样式调整 */
p.boxed {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: justify;
  text-justify: inter-word;
  font-family: "Courier New";
  font-weight: bold;
  color: white;
  margin: 0;
}

/* 图片容器样式调整 */
p.image1 {
  margin: 0;
}

/* 图片自适应 */
p.image1 img {
  max-width: 100%;
  height: auto;
}

<div class="content-container">
  <p class="boxed">placehooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooolder text</p>
  <p class="image1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Orchid_-_Stierch.jpg/330px-Orchid_-_Stierch.jpg" alt="Orchid performing in 2000"></p>
</div>

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