如何使我的图像标题网格在不同大小的文本内容下正确浮动

Question

我这里有一个问题，如果标题太长，如果它超出一行，就会导致后面的元素不能正确浮动。我想拥有它，这样无论在标题的内容上，下面的行都调整为space。我已经看到 another 站点实现了非常相似的东西。

我想不出我还需要什么。

body {
 padding: 0;
 margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
 content: '[=10=]20';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
 clear: both;
}
.row, .clearfix, .group {
 zoom: 1;
}
*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body, html {
 height: 100%;
}
body {
 color: #000;
 background: #FFF
}
.column {
 float: left;
 display: block
}
.constraint {
 padding-right: 2%;
 padding-left: 2%;
 margin-right: auto;
 margin-left: auto;
 width: 100%
}
.col-4 {
 width: 33.33333333%
}
.columns {
 padding-left: 25px;
 padding-right: 25px 
}
.row {
 max-width: 100%;
 margin: 0px auto;
 width: auto
}
.picture {
 height: 0;
 position: relative;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat 
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
 padding-bottom: 65% 
}
section#projects .picture.portrait {
 padding-bottom: 75%;
 background-position: inherit 
}
.project-thumbnail {
 margin-bottom: 80px;
 margin-bottom: 3rem;
  overflow: hidden
}

  <div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>

CSS 技巧说：

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats

读到这里，我设置了容器div.project-thumbnail，但没有改变：

.project-thumbnail {
  overflow: auto
}

jsFiddle

编辑

正如评论所建议的那样，为标题 div div.thumb 设置高度将使其能够正确浮动。一个固定的高度会切断对它来说太大的内容。将 overflow: auto 添加到此 div 只会向其添加一个滚动条，这不是我想要的。

编辑

此站点 here 具有类似的系统。有宽度的项目是浮动的，没有行分隔符，但是如果 div 中的内容超出几行，div 的底部将调整，整齐地对齐下一行。

Answer 1

溢出与此无关。你的div高度不一样...为了正确显示它们，请设置描述容器的高度。

Answer 2

已更新，感谢@user10089632 的评论

要使用 float 获得您想要的布局，请尝试将 clear 属性添加到每 4 个 .column。

例子

.column:nth-child(3n + 4) {
  clear: both;
}

这将从第 4 个 .column 开始，每第 3 个 .column 作为目标（您不需要将规则应用于示例中的第一个 div）

如果您需要将网格更改为 4 x 4 或其他，您可以调整 nth-child(n)。

您可以将此代码应用于 article，具体取决于您网站的其余部分。

fiddle

body {
 padding: 0;
 margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
 content: '[=11=]20';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
 clear: both;
}
.row, .clearfix, .group {
 zoom: 1;
}
*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body, html {
 height: 100%;
}
body {
 color: #000;
 background: #FFF
}
.column {
 float: left;
 display: block
}
.constraint {
 padding-right: 2%;
 padding-left: 2%;
 margin-right: auto;
 margin-left: auto;
 width: 100%
}
.col-4 {
 width: 33.33333333%
}
.columns {
 padding-left: 25px;
 padding-right: 25px 
}
.row {
 max-width: 100%;
 margin: 0px auto;
 width: auto
}
.picture {
 height: 0;
 position: relative;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat 
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
 padding-bottom: 65% 
}
section#projects .picture.portrait {
 padding-bottom: 75%;
 background-position: inherit 
}
.project-thumbnail {
 margin-bottom: 80px;
 margin-bottom: 3rem;
  overflow: hidden
}

.column:nth-child(4) {
  clear: both;
}

  <div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>

Answer 3

第一个解决方案

这就是您要查找的内容，您只需向 css、

添加一条规则

.row article:nth-child(3n+1){
    clear: left;
}

.row article:nth-child(3n+1){
 clear: left;
}
body {
 padding: 0;
 margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
 content: '[=11=]20';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
 clear: both;
}
.row, .clearfix, .group {
 zoom: 1;
}
*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body, html {
 height: 100%;
}
body {
 color: #000;
 background: #FFF
}
.column {
 float: left;
 display: block
}
.constraint {
 padding-right: 2%;
 padding-left: 2%;
 margin-right: auto;
 margin-left: auto;
 width: 100%
}
.col-4 {
 width: 33.33333333%
}
.columns {
 padding-left: 25px;
 padding-right: 25px 
}
.row {
 max-width: 100%;
 margin: 0px auto;
 width: auto
}
.picture {
 height: 0;
 position: relative;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat 
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
 padding-bottom: 65% 
}
section#projects .picture.portrait {
 padding-bottom: 75%;
 background-position: inherit 
}
.project-thumbnail {
 margin-bottom: 80px;
 margin-bottom: 3rem;
  overflow: hidden
}

<div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>

第二种解决方案：内联块显示

流畅、可扩展、易于掌握

我更喜欢这个解决方案，使用 display:inline-block，它很简单，现在适用于 IE。唯一的缺点是标记之间的空白（我选择在此处删除它们）。

我刚刚冒昧地修改了您的代码，以便您可以找到修改的内容。

body {
 padding: 0;
 margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
 content: '[=13=]20';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
 clear: both;
}
.row, .clearfix, .group {
 zoom: 1;
}
*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body, html {
 height: 100%;
}
body {
 color: #000;
 background: #FFF
}
.column {
 display: inline-block;
 vertical-align: top;
}
.constraint {
 padding-right: 2%;
 padding-left: 2%;
 margin-right: auto;
 margin-left: auto;
 width: 100%
}
.col-4 {
 width: 33.33333333%
}
.columns {
 padding-left: 25px;
 padding-right: 25px 
}
.row {
 max-width: 100%;
 margin: 0px auto;
 width: auto
}
.picture {
 height: 0;
 position: relative;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat 
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
 padding-bottom: 65% 
}
section#projects .picture.portrait {
 padding-bottom: 75%;
 background-position: inherit 
}
.project-thumbnail {
 margin-bottom: 80px;
 margin-bottom: 3rem;
  overflow: hidden
}

<div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>

第三种方案：网格布局

很酷很强大的现代CSS功能，你可以得到更多info here

body {
 padding: 0;
 margin: 0 auto;
}



body, html {
 height: 100%;
}
body {
 color: #000;
 background: #FFF
}

.constraint {
 /*! padding-right: 2%; */
 /*! padding-left: 2%; */
 margin-right: auto;
 margin-left: auto;
 width: 100%;
}
.col-4 {
 /*! width: 33.33333333% */
}
.columns {
 padding-left: 25px;
 padding-right: 25px; 
}
.row {
 max-width: 100%;
 margin: 0px auto;
 width: auto;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
}
.picture {
 height: 0;
 position: relative;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat 
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
 padding-bottom: 65% 
}
section#projects .picture.portrait {
 padding-bottom: 75%;
 background-position: inherit 
}
.project-thumbnail {
 margin-bottom: 80px;
 margin-bottom: 3rem;
}

<div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>

Answer 4

这一切似乎代码太多了。

我使用 Flexbox 对其进行了简化（如下所示）。

这是我所做的：

对于.center 我在包含网格容器的 div 中添加了一个名为 "center" 的 class。它基本上使您的部分居中。

部分该部分是所有网格元素的容器。我添加了 display、flex-direction、flex-wrap 和 width。您不必声明所有这些（显示除外），因为其中一些是使用 display:flex 附带的默认值。我鼓励您在控制台中对其进行全面测试。

文章您需要在这里声明宽度和边距。我要声明 4 列。以下是如何使用 2 列进行计算的示例：

由于我的保证金是 1.66%，我的总保证金 space 是 6.64% 我是怎么得出这个数字的？第一个网格元素在右侧和左侧都有边距。第二个网格元素在右侧和左侧都有边距。所以，1.66% X 4

然后我用 100 减去 6.64，得到 93.36。我 divide 分成两列，因为我有两列。所以每个列宽将为 46.68%。 */

如果要添加填充，则需要声明以下内容：

article { box-sizing:border-box; }

这将防止您的列损坏。

CSS Tricks 有一个关于如何使用 flexbox 的很棒的教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
section {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width:80%;
}
article {
  background: grey;
  width:21.68%;
  margin: 1.66%;
}

img {
  max-width:100%;
}

<div class="center">
    <section> 
        <!-- Project previews -->
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
    </section>
  </div>

Answer 5

你必须给 .project-thumbnail 静态高度

.project-thumbnail {
    margin-bottom: 80px;
    margin-bottom: 3rem;
    overflow: hidden;
    height: 365px;
}

如何使我的图像标题网格在不同大小的文本内容下正确浮动

How to keep my image caption grid floating correctly with different sized text content

css

css-float

第一个解决方案

第二种解决方案：内联块显示

第三种方案：网格布局