时间戳

首页 > 解决方案 > 如何防止带有额外底部文本的图像在 flexbox 缩略图中向上移动

css - 如何防止带有额外底部文本的图像在 flexbox 缩略图中向上移动

问题描述

图像的底部文本在缩略图列表中向上移动图像。

我看到一些关于 Mozilla firefox 向上移动图像的链接，给出的解决方案是使用

vertical-align: top;

或者

vertical-align: bottom;

问题解决了一半，因为文本超出了正常高度，延伸到下方的另一个图像，而不是向下推图像以保持一般形式。

这是我的 CSS 代码

  .flex-cover{
   width:100%; 
   display:flex; 
   justify-content: center;
  }
  .flex-child{
    text-align: center;
  }
  .flex-head{
     font-size: 20px;
     margin-top: 10px; 
     color: #ce7842; 
     text-shadow: #aaa 0 0 1px; 
     font-weight: bold;
     padding:10px;
     text-align: center;
  }

  .flex-body{
     color:#969c84;
  }

  .flex-box{
     display: inline-block;
     width:140px;
     height:140px; 
     margin:10px; 
     vertical-align: top;
     text-align: center;
  }

  .flex-pics{
    height:120px;
    width:100%;
  }

  .flex-box .flex-pics{
    background-size: 100% 100%;
  }

这是html代码

<div class="flex-cover">

    <div class="flex-child">

      <div class="flex-head"> Recent Articles</div>

      <div class="flex-body">
        <div class="mycover flex-box">
        <div class="pull-left flex-pics" style="background-image: url(&quot;/images/im/imm20.jpg&quot;);"></div><br>       
         My Article 1
        </div> 

        <div class="mycover flex-box">
        <div class="pull-left flex-pics" style="background-image: url(&quot;/images/im/imm20.jpg&quot;);"></div><br>       
         My Article 2 with some more content added to it
        </div>

        <div class="mycover flex-box">
        <div class="pull-left flex-pics" style="background-image: url(&quot;/images/im/imm20.jpg&quot;);"></div><br>       
          My Article 2
        </div>

        <div class="mycover flex-box">
        <div class="pull-left flex-pics" style="background-image: url(&quot;/images/im/imm20.jpg&quot;);"></div><br>       
          My Article 4
        </div>
      </div>

    </div>

  </div>

浏览器未折叠时的原始视图

浏览器未折叠时的原始视图

浏览器折叠后的图像

浏览器折叠后的图像

如您所见，一些文本正在下方，而不是将图像向下推。我也不想使用：

float:left

因为在使用浮动时似乎不可能将图像移到中心。因此，一个好的答案将得到适当的奖励。感谢期待。

标签： css

解决方案

您可以删除height: 140px;for .flex-box。这就是它发生的原因。

推荐阅读