如何使整行的 Divs 高度相同？答案

【问题标题】：How to make Divs same height across an entire row?如何使整行的 Divs 高度相同？
【发布时间】：2019-12-31 01:33:10
【问题描述】：

使用来自 W3Schools 的 CSS Image Gallery 代码，我有一种可行的方法来展示由容器组成的图片库。这些容器都有长度不同的文本元素。这导致每一行都有div 等宽但不等高的容器。我想标准化整行的高度。

根据我正在使用的代码，哪些 CSS 更改会产生影响？

<!DOCSTRING html>
<html>
    <style>
        div.gallery {
            border: 1px solid #ccc;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
            font-size: 12px;
        }

        * {
            box-sizing: border-box;
        }

        .responsive {
            padding: 0 6px;
            float: left;
            width: 24.99999%; 
            margin: 6px 0;
        }

        @media only screen and (max-width: 700px) {
        .responsive {
            width: 49.99999%;
            margin: 6px 0;
            }
        }

        @media only screen and (max-width: 500px) {
        .responsive {
            width: 100%;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
    <body>
        <div class="responsive">
            <div class="gallery">
                <a href="vid_01.mp4">
                    <img src="cover_01.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                </div>
            </div>
        </div>

        <div class="responsive">
            <div class="gallery">
                <a href="vid_02.mp4">
                    <img src="cover_02.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                </div>
            </div>
        </div>

        <div class="responsive">
            <div class="gallery">
                <a href="vid_03.mp4">
                    <img src="cover_03.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                </div>
            </div>
        </div>
    </body>
</html>

编辑（2019 年 12 月 30 日 22:48）： 这是一个 JSFiddle 演示问题。这是一张图片：

【问题讨论】：

标签： html css

【解决方案1】：

我会为此使用 flexbox；我调整了您的一些标记和 CSS 以将其合并。

这是一个代码笔：https://codepen.io/tillytoby/full/yLyzVWp

HTML：

<div class="container">
  <div class="responsive">
    <div class="gallery">
      <a href="vid_01.mp4">
        <img src="https://via.placeholder.com/150">
      </a>
      <div class="desc">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="vid_02.mp4">
        <img src="https://via.placeholder.com/150">
      </a>
      <div class="desc">
        <p>Variable text...</p>
      </div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="vid_03.mp4">
        <img src="https://via.placeholder.com/150">
      </a>
      <div class="desc">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

CSS：

* {
    box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.responsive {
  display: flex;
}

.gallery {
    border: 1px solid #ccc;
    flex-grow: 1;
}

.gallery:hover {
    border: 1px solid #777;
}

.gallery img {
    width: 100%;
    height: auto;
}

.desc {
    padding: 15px;
    text-align: center;
    font-size: 12px;
}

.responsive {
    width: 25%; 
    padding: 6px;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 50%;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

注意添加的.container 和display: flex;。每个.responsive div 也有display: flex;，这样我们就可以将.gallery 设为弹性项目，如果有多余的空间，我们可以使用flex-grow 来拉伸它。

另外需要注意的是：我用填充替换了您的边距，并使用了更圆的数字（25%、50%、100%）。由于我们使用border-box，因此填充包含在每个响应式 div 的宽度中，因此我们不必对宽度和边距进行任何讨厌的计算。

【讨论】：

此解决方案完美运行！非常感谢您的帮助，并解释这些更改是如何工作的。这完全有道理，因为我可以在我的代码中看到它。

【解决方案2】：

只需参考以下代码。我刚刚接受了一个父 div 并给出了宽度为 100%，高度为父 div 的继承。使用 flex，它将平均分配子 div 之间的宽度比例。现在要为所有子 div 设置相同的高度，这只是一个简单的任务使其高度为 100%。

 <html>
    <style>
        .parent-div{
            width: 100%;
            height: inherit;
            display: flex;
        }
        div.gallery {
            border: 1px solid #ccc;
            height: 100%;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
            font-size: 12px;
        }

        * {
            box-sizing: border-box;
        }

        .responsive {
            padding: 0 6px;
            float: left;
            width: 24.99999%; 
            margin: 6px 0;
        }

        @media only screen and (max-width: 700px) {
        .responsive {
            width: 49.99999%;
            margin: 6px 0;
            }
        }

        @media only screen and (max-width: 500px) {
        .responsive {
            width: 100%;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
    <body>
        <div class="parent-div">
            <div class="responsive">
                <div class="gallery">
                    <a href="vid_01.mp4">
                        <img src="http://www.philologia.io/img/home.png">
                    </a>
                    <div class="desc">
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                    </div>
                </div>
            </div>

            <div class="responsive">
                <div class="gallery">
                    <a href="vid_02.mp4">
                        <img src="http://www.philologia.io/img/home.png">
                    </a>
                    <div class="desc">
                        <p>Variable text...</p>
                    </div>
                </div>
            </div>

            <div class="responsive">
                <div class="gallery">
                    <a href="vid_03.mp4">
                        <img src="http://www.philologia.io/img/home.png">
                    </a>
                    <div class="desc">
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                    </div>
                </div>
            </div>

            <div class="responsive">
                <div class="gallery">
                    <a href="vid_03.mp4">
                        <img src="http://www.philologia.io/img/home.png">
                    </a>
                    <div class="desc">
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                    </div>
                </div>
            </div>

            <div class="responsive">
                <div class="gallery">
                    <a href="vid_03.mp4">
                        <img src="http://www.philologia.io/img/home.png">
                    </a>
                    <div class="desc">
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                    </div>
                </div>
            </div>

            <div class="responsive">
                <div class="gallery">
                    <a href="vid_03.mp4">
                        <img src="http://www.philologia.io/img/home.png">
                    </a>
                    <div class="desc">
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                        <p>Variable text...</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

希望我的解决方案能帮到你... :-)

【讨论】：

【解决方案3】：

可以使用Flex CSS 属性。使用下面的 Css 或查找 Codepan 链接

<!DOCTYPE html>
<html>
    <style>
        .responsive{
          display: flex;
          flex-wrap: wrap;
        }
        div.gallery {
            border: 1px solid #ccc;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
            font-size: 12px;
        }

        * {
            box-sizing: border-box;
        }

        .gallery {
            padding: 5px;
            float: left;
            width: 23.99999%; 
            margin: 5px .5%;
        }

        @media only screen and (max-width: 700px) {
        .gallery {
            width: 48.99999%;

            }
        }

        @media only screen and (max-width: 500px) {
        .gallery {
            width: 100%;
            margin: 5px 0;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
    <body>
        <div class="responsive">
            <div class="gallery">
                <a href="vid_01.mp4">
                    <img src="http://www.philologia.io/img/home.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                </div>
            </div>
            <div class="gallery">
                <a href="vid_02.mp4">
                    <img src="http://www.philologia.io/img/home.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                </div>
            </div>

            <div class="gallery">
                <a href="vid_03.mp4">
                    <img src="http://www.philologia.io/img/home.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                </div>
            </div>
            <div class="gallery">
                <a href="vid_03.mp4">
                    <img src="http://www.philologia.io/img/home.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                </div>
            </div>
            <div class="gallery">
                <a href="vid_03.mp4">
                    <img src="http://www.philologia.io/img/home.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                </div>
            </div>
            <div class="gallery">
                <a href="vid_03.mp4">
                    <img src="http://www.philologia.io/img/home.png">
                </a>
                <div class="desc">
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                    <p>Variable text...</p>
                </div>
            </div>
        </div>
    </body>
</html>

https://codepen.io/rvtech/pen/qBEPrRr

【讨论】：