问CSS网格布局中图像的高度
EN

Stack Overflow用户

提问于 2022-06-25 11:53:07

回答 1查看 33关注 0票数 0

图1的大小是:300 to *300 to，而图2的大小是:600 to*300 to，如何解决这两个图像高度不一致的问题。我认为gap:20px存在一个问题，第二个图像占用了一个空白的宽度。

请运行代码片段并在完整页面中查看.

.c3-section-grid-image {

      }
      .c3-grid-image-wrapper {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 20px;
      }
      .c3-grid-image-wrapper .grid-item {
          position: relative;
          display: flex;
          flex-direction: column;
      }
      .c3-grid-image-wrapper .grid-item img {
          display: block;
          width: 100%;
          height: auto;
      }
      .c3-grid-image-wrapper .grid-item .grid-text {
          padding: 10px 0;
      }
      .c3-grid-image-wrapper .grid-item .text-title {
          font-size: 1.4em;
          font-weight: bold;
      }
      .c3-grid-image-wrapper .grid-item .text-desc {
          font-size: 1em;
      }
      .c3-grid-image-wrapper.text-layout-inside .grid-text {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          padding: 16px;
      }

<div class="c3-section-grid-image"
     style="margin: 10px 0px; padding: 0px; background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);">
  <div class="c3-grid-image-wrapper text-layout-inside">
    <div class="grid-item">
      <img src="http://res.cloudinary.com/xingshang/image/upload/v1656153419/decteamstore/220625/d9fo1r5fdlfk7jkxuf9k.jpg">
      <div class="grid-text" style="text-align:center;">
        <div class="text-title">IPhone-1</div>
      </div>
    </div>

    <div class="grid-item" style="grid-column: span 2 / auto;">
      <img src="http://res.cloudinary.com/xingshang/image/upload/v1656153439/decteamstore/220625/amgv1kkbehftmb9wgwv9.jpg">
      <div class="grid-text" style="text-align:center;">
        <div class="text-title">IPhone-2</div>
      </div>
    </div>
  </div>
</div>

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-25 12:05:29

删除flex-direction: column，它会导致第一张图片的尺寸略有变化，因此，随着它的删除，一切都应该很好，这两个图像的高度现在是一样的。

.c3-section-grid-image {

      }
      .c3-grid-image-wrapper {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-gap: 20px;
      }
      .c3-grid-image-wrapper .grid-item {
          position: relative;
          display: flex;
          
      }
      .c3-grid-image-wrapper .grid-item img {
          display: block;
          width: 100%;
          height: auto;
      }
      .c3-grid-image-wrapper .grid-item .grid-text {
          padding: 10px 0;
      }
      .c3-grid-image-wrapper .grid-item .text-title {
          font-size: 1.4em;
          font-weight: bold;
      }
      .c3-grid-image-wrapper .grid-item .text-desc {
          font-size: 1em;
      }
      .c3-grid-image-wrapper.text-layout-inside .grid-text {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          padding: 16px;
      }

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="c3-section-grid-image"
     style="margin: 10px 0px; padding: 0px; background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);">
  <div class="c3-grid-image-wrapper text-layout-inside">
    <div class="grid-item">
      <img src="http://res.cloudinary.com/xingshang/image/upload/v1656153419/decteamstore/220625/d9fo1r5fdlfk7jkxuf9k.jpg">
      <div class="grid-text" style="text-align:center;">
        <div class="text-title">IPhone-1</div>
      </div>
    </div>

    <div class="grid-item" style="grid-column: span 2 / auto;">
      <img src="http://res.cloudinary.com/xingshang/image/upload/v1656153439/decteamstore/220625/amgv1kkbehftmb9wgwv9.jpg">
      <div class="grid-text" style="text-align:center;">
        <div class="text-title">IPhone-2</div>
      </div>
    </div>
  </div>
</div>
    </body>
</html>

或者，您也可以删除代码中的gap: 20px，但是当然，这不会导致网格间隔。

希望我帮了你。(：

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72753626

复制

相似问题

问CSS网格布局中图像的高度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格布局中图像的高度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格布局中图像的高度
EN