Question

从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>

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

Answer 1

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

这是一个codepen：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的宽度都包含填充，因此我们不必对宽度和边距进行任何讨厌的计算。

Answer 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>

希望我的解决方案可以帮助您...：-）

Answer 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

Answer 4

使用flexbox，您可以将一级子容器设置为统一高度。

Flexbox需要一个父（容器）div和子div。子div中的其他div被忽略。如果您需要设置比一个级别更深的样式，则div既可以是flexbox的子代，也可以是flexbox的父代（对于自己的子代）。

在您的代码示例中，我创建了一个新的容器div作为flexbox的父级（.gallery-container），并使用现有的.responsive div作为flex的子级。

Here's a short video可以使您快速入门。

Here's a great cheat sheet for flexbox。

.gallery-container{
  display:flex;
  align-items:center;
}
.responsive{
  flex:1;
}

<div class="gallery-container">
	<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>
</div><!-- .gallery-container -->

如何在整个行中使Divs高度相同？

4 个答案: