实现DIV从inline-block到响应式偏移堆叠布局的适配问题

Let's break down how to adjust your code to get the stacked mobile layout, larger readable text, and proper alignment you need. Here's what we'll fix and improve:

1. Fix Basic CSS Syntax & Layout Issues #

Your current code has a few errors that are holding it back:

• float: center is invalid (float only accepts left/right/none) — we can remove this entirely since we're using inline-block (and later block for mobile).
• vertical-align: center should be vertical-align: middle to properly center inline-block elements vertically.
• The padding shorthand padding-left, padding-right is invalid syntax — use padding-inline (modern) or separate padding-left and padding-right declarations instead.
• Media query order matters! You had overlapping min-width queries; we'll switch to a mobile-first approach (start with mobile styles, then override for larger screens) which is more intuitive.

2. Implement Stacked Mobile Layout #

For screens smaller than 1000px, we'll change each banner item from inline-block to block so they stack vertically, and set width: 100% to fill the container. We'll also add a small bottom margin to space them out.

3. Boost Mobile Font Size #

Your original font calculation starts at 9px on 320px screens — way too small for readability. We'll adjust the calc formula to start at a larger base size (14px) that scales up to 18px at 1000px, matching your desktop size. Alternatively, you can set a fixed larger size for mobile if you prefer consistent text.

4. Set Line-Wrap Alignment #

We'll ensure text alignment is consistent (keep text-align: center if that's your preference, or switch to left for better readability on mobile) and that wrapped lines stay properly aligned.

Corrected Full Code #

HTML (unchanged)

<div class="highlights-banner-background">
 <div class="highlights-banner-inner">
  <div class="highlights_banner_item-1"> Div 1 </div>
  <div class="highlights_banner_item-2"> Div 2 </div>
  <div class="highlights_banner_item-3"> Div 3 </div>
  <div class="highlights_banner_item-4"> Div 4 </div>
 </div>
</div>

CSS (fixed & optimized)

/* Base styles (mobile-first) */
.highlights-banner-background {
  background-color: #f8f8f8;
  text-align: center;
  position: relative;
  height: 80px; /* Taller mobile height to fit stacked items */
}

.highlights-banner-inner {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  padding-inline: 12px; /* Mobile side padding */
}

.highlights_banner_item-1, 
.highlights_banner_item-2, 
.highlights_banner_item-3, 
.highlights_banner_item-4 {
  display: block; /* Stack items vertically on mobile */
  width: 100%;
  vertical-align: middle;
  font-size: 16px; /* Larger base mobile font for readability */
  margin-bottom: 8px; /* Space between stacked items */
}

/* Remove bottom margin from last item to avoid extra space */
.highlights_banner_item-4 {
  margin-bottom: 0;
}

/* Tablet & larger screens (768px to 999px) */
@media screen and (min-width: 768px) {
  .highlights_banner_item-1, 
  .highlights_banner_item-2, 
  .highlights_banner_item-3, 
  .highlights_banner_item-4 {
    display: inline-block;
    width: 24%;
    margin-bottom: 0;
    font-size: calc(14px + 4 * ((100vw - 768px) / 232)); /* Scale from 14px to 18px */
  }
  
  .highlights-banner-background {
    height: calc(60px + 10 * ((100vw - 768px) / 232)); /* Scale height with screen size */
  }
  
  .highlights-banner-inner {
    padding-inline: calc(12px + 38 * ((100vw - 768px) / 232)); /* Scale padding */
  }
}

/* Desktop (1000px+) */
@media screen and (min-width: 1000px) {
  .highlights_banner_item-1, 
  .highlights_banner_item-2, 
  .highlights_banner_item-3, 
  .highlights_banner_item-4 {
    font-size: 18px;
  }
  
  .highlights-banner-background {
    height: 50px;
  }
  
  .highlights-banner-inner {
    padding-inline: 50px;
  }
}

Key Notes: #

• Mobile-first approach: We start with mobile styles (stacked items, larger font) then override for bigger screens. This ensures mobile gets priority and avoids media query conflicts.
• Font scaling: The calc formula now starts at 14px on tablets and scales up to 18px on desktop — no tiny 9px text on small mobile screens.
• Spacing: Added margin-bottom to mobile items so they don't crowd each other when stacked.
• Valid syntax: Fixed padding and vertical-align errors that were breaking your layout.

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