如何实现两个带点击放大效果的元素横向并排对齐？

布局失效核心原因 #

• 第二个.click-zoom元素自带margin-left: 50%、padding-bottom: 60%内联样式，强制错位并占用额外空间
• 图片设置margin: 100px全局外边距，左右边距额外挤占横向宽度，导致元素无法并排

修复方案（Flex实现） #

清理冗余样式后给两个图片模块套flex父容器即可实现稳定并排对齐，完整代码如下：

CSS代码 #

.click-zoom input[type=checkbox] {
  display: none;
}

.click-zoom img {
  /* 仅保留上下边距，移除左右边距避免挤占横向空间 */
  margin: 100px 0;
  transition: transform 0.25s ease;
  cursor: zoom-in;
  width: 100%;
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(2.5);
  cursor: zoom-out;
}

/* 新增flex容器样式 */
.image-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.click-zoom {
  width: 48%;
}

HTML代码 #

<section id="work" style="padding-left: 10%; padding-bottom: 5%; padding-right: 10%; ">
  <h1 class="display-1 title" style="color: black;">My work</h1>
  <div class="image-group">
    <div class="click-zoom">
      <label>
        <input type="checkbox">
        <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="示例图1">
      </label>
    </div>
    <div class="click-zoom">
      <label>
        <input type="checkbox">
        <img src="https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" alt="示例图2">
      </label>
    </div>
  </div>
</section>

如需调整两个图片的间距或者对齐方式，修改.image-group的justify-content、gap属性，或者调整.click-zoom的宽度即可。

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