UFC网站开发求助：三张图片横向排列定位问题

Hey there! Let's get those UFC-themed images lined up side-by-side—no problem at all. I’ll walk you through a couple of straightforward, reliable solutions that’ll fix your positioning issue right away.

常见问题排查 #

First off, the reason your wrapped <div>s aren’t lining up is that div elements are block-level by default—they take up the full width of their container, forcing each one onto a new line. We just need to adjust their display behavior or use a layout system to override that.

Flexbox is the simplest and most flexible way to handle horizontal layouts these days. Here’s how to set it up:

HTML 结构 #

<!-- 用一个父容器包裹所有图片的div -->
<div class="ufc-image-container">
  <div class="image-wrapper">
    <img src="your-ufc-image-1.jpg" alt="UFC Fighter 1">
  </div>
  <div class="image-wrapper">
    <img src="your-ufc-image-2.jpg" alt="UFC Fighter 2">
  </div>
  <div class="image-wrapper">
    <img src="your-ufc-image-3.jpg" alt="UFC Fighter 3">
  </div>
</div>

CSS 样式 #

/* 父容器开启Flexbox布局 */
.ufc-image-container {
  display: flex;
  gap: 1rem; /* 图片之间的间距，可根据需求调整 */
  justify-content: center; /* 可选：让图片在容器中居中 */
  flex-wrap: wrap; /* 可选：小屏幕时自动换行，保证响应式 */
}

/* 控制每个图片容器的尺寸 */
.image-wrapper {
  flex: 1; /* 让每个容器平分可用宽度 */
  max-width: 300px; /* 限制最大宽度，避免图片过大 */
}

/* 确保图片自适应容器 */
.image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 可选：保持图片比例，裁剪多余部分 */
  border-radius: 8px; /* 可选：给图片加圆角，更美观 */
}

If you prefer Grid (great for more structured layouts), this works too:

CSS 样式（HTML结构和上面一样） #

.ufc-image-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 分成3等宽列 */
  gap: 1rem; /* 图片间距 */
  max-width: 900px; /* 可选：限制容器最大宽度 */
  margin: 0 auto; /* 可选：让容器居中 */
}

.image-wrapper img {
  width: 100%;
  height: 250px; /* 固定高度，让图片统一大小 */
  object-fit: cover;
}

If you want a quick fix without Flex/Grid, you can change the divs to inline-block elements:

.image-wrapper {
  display: inline-block;
  width: 30%; /* 每个容器占30%宽度，留间距 */
  margin: 0 1.5%; /* 左右间距 */
}

.image-wrapper img {
  width: 100%;
  height: auto;
}

Just note that inline-block can have tiny spacing issues from whitespace in your HTML—if you see gaps you don’t want, either remove the whitespace between the .image-wrapper divs or set font-size: 0 on the parent container.

Either of these methods should get your three UFC images sitting nicely next to each other. If you run into any weird edge cases (like images being different sizes), the object-fit: cover property will keep them looking uniform without stretching.

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