如何实现图片内联对齐换行及响应式布局优化

问题说明 #

需要实现响应式布局，消除现有布局中难看的换行问题；图片可保留带背景图的SPAN元素或替换为其他支持背景图的元素；仅需保留子分类的<ul>和<li>元素，其余HTML元素可自由调整。

当前效果 #

期望效果 #

修改后的代码 #

HTML代码 #

<ul class="MainCategories">
  <li>
    <div class="CatHead">
      <a class="PhotoFrame" href="/en-us/categories/food">
        <span class="Photo" style="background-image:url(https://thevegcat.com/img/86460ca1-f14b-44ec-a96a-1aa47a3e39e8/small)"></span>
      </a>
      <a class="ParentCat" href="/en-us/categories/food">Food (additional words to break)</a>
    </div>
    <ul class="SubCategories">
      <li><a href="/en-us/categories/food/sweets">Sweets</a></li>
      <li><a href="/en-us/categories/food/sauces-spices">Sauces & Spices</a></li>
      <li><a href="/en-us/categories/food/snacks-nibbles">Snacks & Nibbles</a></li>
      <li><a href="/en-us/categories/food/ready-made-meals">Ready-made meals</a></li>
      <li><a href="/en-us/categories/food/spreads">Spreads</a></li>
      <li><a href="/en-us/categories/food/milk-cream-yoghurt">Milk, cream, yoghurt</a></li>
      <li><a href="/en-us/categories/food/semi-prepared-meals-and-mixtures">Semi-prepared meals and mixtures</a></li>
      <li><a href="/en-us/categories/food/bread-and-bakery-products">Bread and bakery products</a></li>
      <li><a href="/en-us/categories/food/cereal-flakes">Cereal Flakes</a></li>
      <li><a href="/en-us/categories/food/beverage">Beverage</a></li>
      <li><a href="/en-us/categories/food/baby-food">Baby Food</a></li>
    </ul>
  </li>
</ul>

CSS代码 #

.MainCategories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 20px;
}

.MainCategories > li {
  flex: 1 1 min(650px, 100%);
  margin: 0;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(167, 204, 63, 0.5);
}

.MainCategories > li > .CatHead {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.MainCategories > li > .CatHead > a.PhotoFrame .Photo {
  display: block;
  width: 100px;
  height: 75px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-size: cover;
  background-position: center;
}

.MainCategories > li > .CatHead > a.PhotoFrame:hover .Photo {
  opacity: 0.5;
}

.MainCategories > li > .CatHead > a.ParentCat {
  flex: 1;
  font-size: xx-large;
  color: #888;
  line-height: 1.3;
}

.MainCategories > li > .CatHead > a.ParentCat:hover {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.SubCategories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.SubCategories > li {
  position: relative;
  padding-left: 15px;
}

.SubCategories > li:first-child {
  padding-left: 0;
}

.SubCategories > li:not(:first-child):before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: xx-large;
  color: #888;
}

.SubCategories > li > a {
  font-size: large;
  text-underline-offset: 3px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .MainCategories > li {
    flex: 1 1 100%;
  }
  
  .MainCategories > li > .CatHead {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ParentCat {
    text-align: left;
  }
}

关键修改说明 #

1. 头部布局重构：将.CatHead改为Flex容器，实现图片与标题的垂直居中，标题自动占满剩余宽度并自然换行，避免原布局中white-space导致的排版问题。
2. 子分类列表优化：改用Flex布局实现自动换行，通过gap控制间距，用绝对定位的伪元素实现分隔点，取代原inline-block的方式，排版更整洁且适配响应式。
3. 响应式适配：添加媒体查询，在小屏设备下将头部布局改为垂直排列，确保移动端体验良好。
4. 容器宽度调整：使用flex: 1 1 min(650px, 100%)实现自适应宽度，既保证最小宽度又能在大屏上合理扩展。

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