Div元素无法与其他元素同行显示问题求助

问题分析 #

你当前的布局问题出在中间的.Sales元素使用了display:block+margin:auto的组合——block元素会独占一行宽度，即使左右有浮动元素，它也会把水平空间占满，导致右侧的.Impact浮动元素只能被挤到下一行。

方案1：使用Flexbox布局（推荐） #

Flexbox是现代布局的首选方案，能轻松实现同行排列，还能灵活调整对齐方式。

修改步骤：

1. 给三个Div添加一个父容器：

<div class="content-container">
  <div class="Reviews">
        <img src="review.jpg" alt="Needledrop Review" class="Review"> Sample Text Sample
  </div>
  <div class="Sales">
        <img src="redcarpet.jpg" alt="JID on the Red Carpet" class="RedCarpet"> Sample Text
  </div>
  <div class="Impact">
        <img src="dreamville.jpg" alt="JID with Dreamville members" class="Dream"> Sample
  </div>
</div>

2. 更新CSS，移除原有的浮动和margin:auto，给父容器设置Flex属性：

/* 父容器样式 */
.content-container {
  display: flex;
  justify-content: space-between; /* 元素之间自动分配剩余空间 */
  gap: 15px; /* 可选：给元素之间添加间距 */
  max-width: 1200px; /* 可选：限制最大宽度，避免页面过宽 */
  margin: 0 auto; /* 让整个容器在页面居中 */
}

/* 移除原有的float和margin:auto，保留其他样式 */
div.Reviews {
  border: 1px solid black;
  font-size: 1.207em;
  width: 400px;
  height: 770px;
  text-align: justify;
  color: white
}

div.Sales {
  border: 1px solid black;
  font-size: 1.207em;
  width: 400px;
  height: 770px;
  text-align: justify;
  color: white
}

div.Impact {
  font-size: 1.207em;
  border: 1px solid black;
  padding: 10px;
  width: 255px;
  height: 737px;
  text-align: justify;
  color: white
}

/* 图片样式保持不变 */
img.Review {
  vertical-align: text-top;
  width: 100%;
}

img.RedCarpet {
  vertical-align: text-bottom;
  width: 100%;
}

img.Dream {
  vertical-align: text-top;
  width: 100%;
}

如果需要让三个元素底部对齐，只需给父容器再加一行：

.content-container {
  /* 已有的样式 */
  align-items: flex-end;
}

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

如果需要兼容不支持Flexbox的旧环境，可以调整所有元素为浮动，并给父容器清除浮动：

1. 修改.Sales的CSS，将其改为左浮动：

div.Sales {
  float: left;
  margin: 0 15px; /* 可选：添加左右间距 */
  border: 1px solid black;
  font-size: 1.207em;
  width: 400px;
  height: 770px;
  text-align: justify;
  color: white
}

2. 给父容器添加清除浮动的样式（避免影响后续页面内容）：

.content-container::after {
  content: "";
  display: table;
  clear: both;
}

注意：确保三个元素的总宽度（包括边框、内边距、间距）不超过父容器宽度，否则元素仍会换行。

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