如何让图片及对应段落横向排列而非纵向？

问题背景 #

当前图片和对应段落纵向排列时布局整齐，但尝试改为横向排列时内容混乱，使用display:flex后出现图片与段落重叠的情况。

修复思路与实现 #

要实现图片和段落的整齐横向排列，核心是给每个产品模块单独做容器，再通过Flex布局精准控制元素排列，同时做好尺寸约束，具体操作如下：

1. 重构HTML结构：将每个产品的图片和描述包裹在同一个容器内，确保每个产品是独立的模块，避免元素混杂
2. 配置Flex布局：给产品容器添加display:flex，搭配align-items实现垂直居中，用gap控制图片与文字的间距
3. 统一图片尺寸：固定图片宽高，用object-fit: cover保持图片比例，避免因图片尺寸差异打乱布局
4. 优化整体容器：给cosmetics-content设置纵向Flex，控制多个产品模块的垂直排列，同时添加间距增强可读性

修改后的CSS代码 #

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: rgb(255, 255, 255);
  height: 600px;
}

.navbar {
  width: 98.5%;
  margin: auto;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
}

.logo {
  width: 160px;
  cursor: pointer;
  margin-right: auto;
}

.navbar .dropdown {
  display: none;
  box-shadow: 0px 0px 2px #000;
  border-radius: 5px;
  left: -30%;
  outline: none;
}

.navbar ul li:hover .dropdown {
  display: block;
}

.navbar>ul>li {
  position: relative;
}

.navbar>ul>li>.dropdown {
  position: absolute;
  top: 1.4em;
}

.navbar .dropdown li {
  display: block;
  margin: 15px;
  text-align: center;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
}

.navbar ul li a {
  text-decoration: none;
  color: black;
  border-bottom: 0px;
}

.navbar ul li a:hover {
  color: teal;
}

.navbar>ul>li::after {
  content: '';
  height: 3px;
  width: 0;
  background: teal;
  position: absolute;
  left: 0;
  bottom: 0px;
  transition: 0.5s;
}

.navbar>ul>li:hover::after {
  width: 100%;
}

button1 {
  list-style: none;
  border: none;
  background: teal;
  padding: 10px 20px;
  border-radius: 20px;
  color: white;
  font-size: 15px;
  transition: 0.4s;
}

footer {
  height: auto;
  background-color: rgb(255, 255, 255);
  padding-top: 0px;
  margin-top: 150px;
}

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  list-style: none;
  gap: 20px;
}

/* 新增/修改的核心样式 */
.cosmetics-content {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 产品模块之间的垂直间距 */
  padding: 0 20px;
}

.product-item {
  display: flex;
  align-items: center; /* 图片与文字垂直居中对齐 */
  gap: 25px; /* 图片与文字的横向间距 */
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

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

.product-info p {
  margin: 6px 0;
  line-height: 1.5;
}

修改后的HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="banner-home">
  <div class="navbar">
    <img src="icon.png" class="logo">
    <ul>
      <li><a href="http://127.0.0.1:3000/Project/Home.html">Home</a></li>
      <li><a href="#">Products</a>
        <ul class="dropdown">
          <li><a href="#">Healthcare</a></li>
          <li><a href="#">Cosmetic</a></li>
          <li><a href="#">Misc.</a></li>
        </ul>
      </li>
      <li><a href="http://127.0.0.1:3000/Project/AboutUs.html">About Us</a></li>
      <li><a href="#">Register</a></li>
    </ul>
    <a href="#" style="text-decoration:none;">
      <button1>Login</button1>
    </a>
  </div>
  <div class="cosmetics-header">
    <h1>Cosmetics</h1>
    <p> Choose from a wide variety of cosmetics, made to spark the beauty inside you.</p>
  </div>
  <div class="cosmetics-content">
    <!-- 指甲油产品模块 -->
    <div class="product-item">
      <div class="nail-polish">
        <p>Best Selling!</p>
        <img src="nail_polish.jpg" alt="Nail Polish">
      </div>
      <div class="product-info">
        <p><b>Nail Polish</b></p>
        <p>Choose from a wide variety of colors, guaranteed to last long and easily removable.</p>
      </div>
    </div>
    <!-- 口红产品模块 -->
    <div class="product-item">
      <img src="lipstick.jpg" alt="Lipstick">
      <div class="product-info">
        <p><b>Lipstick</b></p>
        <p>Highly pigmented lip color with a creamy smooth glide during application that leaves lips feeling hydrated, nurtured, and conditioned.</p>
      </div>
    </div>
    <!-- 化妆刷产品模块 -->
    <div class="product-item">
      <img src="brush.jpg" alt="12pcs Brush Set">
      <div class="product-info">
        <p><b>12pcs Brush Set</b></p>
        <p>Containing 12 high quality and durable make-up brushes.</p>
      </div>
    </div>
  </div>
</div>
<footer>
  <div>
    <ul class="socials">
      <li><a href="https://twitter.com/Clownehara" target="_blank"><i class="fa fa-twitter"></i></a></li>
      <li><a href="https://www.facebook.com/profile.php?id=100012662688022" target="_blank"><i class="fa fa-facebook"></i></a></li>
      <li><a href="https://www.instagram.com/satrianavito/" target="_blank"><i class="fa fa-instagram"></i></a></li>
    </ul>
    <div class="footer-content">
      <p>Copyright Ⓒ 2022 [Muhammad Vito Ananda Satriana]. All Rights Reserved.</p>
    </div>
</footer>

关键修改说明 #

• 新增product-item容器：将每个产品的图片和描述包裹在一起，确保Flex布局只作用于当前产品的元素，避免跨模块干扰
• 统一图片尺寸：固定宽高并添加object-fit: cover，解决图片大小不一导致的布局错位问题
• 合理设置间距：通过gap属性控制元素间距离，替代margin避免布局冲突
• 优化文字区域：新增product-info类统一文字样式，提升可读性

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