列表式三角形图片浮动布局优化：按父块高度均匀排列需求

Got it, let's fix this layout issue properly. The problem with your current code is that fixed margin-bottom values can't adapt to changes in the parent container's height, so the elements won't stay evenly spaced. Here's a robust solution using Flexbox (the modern way to handle this kind of layout) along with adjusted jQuery code:

Step 1: Fix & Refine the DOM Wrapping #

First, let's correct the typo in your original code (clas → class) and add a unified outer container to control the overall layout:

// Wrap each pair of list items into section containers
$('.triangle-list1, .triangle-list2').wrapAll('<div class="triangle-list-section">');
$('.triangle-list3, .triangle-list4').wrapAll('<div class="triangle-list-section">');
$('.triangle-list5, .triangle-list6').wrapAll('<div class="triangle-list-section">');

// Wrap all sections into a single parent container for layout control
$('.triangle-list-section').wrapAll('<div class="triangle-list-container">');

Step 2: Add Flexbox CSS for Even Spacing #

Flexbox is perfect for this scenario because it automatically distributes space evenly, regardless of the parent container's height. Add these styles to your CSS:

/* Outer container: Define height and enable vertical Flex layout */
.triangle-list-container {
  /* Use a fixed height (e.g., 600px) or dynamic height like 100vh for full viewport */
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* Key property: Distribute space evenly between and around elements */
  justify-content: space-evenly;
  /* Optional: Add minimum gap between sections to prevent crowding */
  gap: 15px;
  /* Optional: Add padding to avoid elements touching container edges */
  padding: 20px 0;
}

/* Inner section containers: Handle horizontal layout of triangle pairs */
.triangle-list-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

/* Base styles for triangle image elements */
[class^="triangle-list"] {
  width: 140px;
  height: 140px;
  /* Adjust based on your actual image needs */
  object-fit: cover;
}

Why This Works Better #

• justify-content: space-evenly: This ensures the space between each section (and between sections and container edges) is identical, no matter how the parent container's height changes. No more fixed margins breaking the layout.
• Flexbox Responsiveness: If you need to adjust for mobile, you can easily modify the flex-direction or add media queries without recalculating spacing.

Fallback for Older Browsers #

If you need to support older browsers that don't fully support Flexbox, you can use CSS Grid instead:

.triangle-list-container {
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 15px;
  align-content: space-evenly;
}

This will achieve the same even spacing effect with slightly different syntax.

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