如何实现Card内图片靠右显示？避免margin-left引发标题过长时图片换行

Got it, let's solve this layout problem once and for all! The issue with your current inline-block setup is that when the title text gets too long, it consumes the full width of the container, forcing the image to wrap to the next line. Instead of relying on inline-block hacks, Flexbox is the perfect tool here—it’s built for flexible, responsive layouts and avoids the margin-left issue entirely.

Here’s the revised code: #

HTML

<div class="block_container1">
  <div class="tit" *ngFor="let c of cdata">{{c.name}}</div>
  <div class="image-container">
    <img src="assets/imgs/32.png" alt="Card icon">
  </div>
</div>

CSS

.block_container1 {
  display: flex;
  align-items: center; /* Matches your original vertical-align: middle behavior */
  justify-content: space-between; /* Pushes title left, image right automatically */
  gap: 16px; /* Optional: adds consistent space between title and image */
}

.tit {
  flex: 1; /* Lets the title take up all available space, wrapping text if needed */
  word-wrap: break-word; /* Ensures long titles wrap instead of overflowing */
}

.image-container {
  flex-shrink: 0; /* Guarantees the image never gets squished or pushed down */
}

Why this works: #

• display: flex transforms the container into a flex context, where child elements stay in a row by default—no more unexpected wrapping from inline-block.
• justify-content: space-between handles the left/right positioning without any margin hacks, so the image stays anchored to the right regardless of title length.
• flex: 1 on the title makes it expand to fill the container (minus the image’s width), so long text will wrap instead of pushing the image down.
• flex-shrink: 0 ensures the image retains its original size, even if the container is squeezed narrow.

If you need to support very old browsers (pre-2017), CSS Grid is another solid option, but Flexbox is widely supported and simpler for this use case.

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