如何用CSS为div内的三张分享图片设置合理间距并实现示例布局

First, let's adjust your HTML to wrap the share icons in a dedicated container—this will make styling much cleaner and more maintainable:

<div class="col-lg-10"> 
  <div class="page-small-title"> Jude Alix Patrick Salomon, le DG de l'IGF devient Ministre des Finances </div> 
</div> 
<div class="col-lg-2">
  <!-- Added wrapper container for share icons -->
  <div class="share-icons">
    <img src="images/read_news/u864.png" alt="Share Icon 1"/> 
    <img src="images/index/share_icon_facebook_u59.png" alt="Facebook Share"/> 
    <img src="images/index/[your-third-icon-path]" alt="Share Icon 3"/>
  </div>
</div>

Now add this CSS to style the container and icons for proper spacing and alignment:

.share-icons {
  /* Use flexbox to align icons horizontally */
  display: flex;
  /* Add space between each icon */
  gap: 12px; /* Adjust this value to match your desired spacing */
  /* Center icons vertically to align with the adjacent title */
  align-items: center;
  /* Optional: Center icons horizontally within the col-lg-2 div */
  justify-content: center;
  padding: 8px 0; /* Add vertical padding for better spacing */
}

.share-icons img {
  /* Set a consistent size for all icons */
  width: 24px; /* Adjust based on your icon dimensions */
  height: 24px;
  object-fit: contain; /* Ensure icons don't get stretched */
  cursor: pointer; /* Add pointer cursor for interactivity */
}

Key Details: #

• Flexbox: The display: flex property simplifies horizontal alignment, and gap provides consistent spacing between icons (more reliable than margins here).
• Consistent Sizing: Fixed width/height ensures all icons look uniform, while object-fit: contain preserves their original aspect ratio.
• Alignment: align-items: center keeps icons vertically aligned with the text in the left column. Remove justify-content: center if you want icons left-aligned instead.

Tweak the gap, width, and padding values to match the exact layout from your example image.

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