显示在同一行中使用文本弯曲几个块

Question

我正在尝试创建一些带有图像的块/盒和两个文本 - 标题和子文本，但标题有时会有一个句子，但另外一个，所以如果一个有一个，第二个有两个我想垂直居中第一个。

对于子文本，我想垂直顶部。

以下是我尝试使用的代码：

<div class="row row-home">
    <div class="col-sm-4">
        <a href="/oferta.html#schody" title="Kliknij, aby dowiedzieć się wiecej."><img src="/images/home-1.png" alt="Schody" class="center-block img-responsive" /></a>
        <div class="text">
            <h2><a href="/oferta.html#schody" title="Kliknij, aby dowiedzieć się wiecej.">Schody</a></h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
        </div>
    </div>
    <div class="col-sm-4">
        <a href="/oferta.html#balustrady-i-ogrodzenia" title="Kliknij, aby dowiedzieć się wiecej."><img src="/images/home-2.png" alt="Balustrady" class="center-block img-responsive" /></a>
        <div class="text">
            <h2><a href="/oferta.html#balustrady-i-ogrodzenia" title="Kliknij, aby dowiedzieć się wiecej.">Balustrady i ogrodzenia</a></h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
        </div>
    </div>
    <div class="col-sm-4">
        <a href="/oferta.html#meble" title="Kliknij, aby dowiedzieć się wiecej."><img src="/images/home-3.png" alt="Meble" class="center-block img-responsive" /></a>
        <div class="text">
            <h2><a href="/oferta.html#meble" title="Kliknij, aby dowiedzieć się wiecej.">Meble</a></h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
        </div>
    </div>
</div>

这是CSS：

    #home .text {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    position: relative;
    text-align: center;
    padding: 10px 20px 30px;
    margin: 0px auto 40px;
    width: 100%;
    height: 100%;
    max-width: 236px;
    z-index: 1;
}

#home .text h2 {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
    position: relative;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 0px;
        z-index: 2;
    }
#home .text h3 {
    position: relative;
    color: white;
    font-size: 12px;
    text-align: justify;
    text-transform: uppercase;
    text-align-last: center;
    z-index: 2;
}

它几乎可以工作，但是如果h3在一个块中的文本较少，则此文本与底部对齐，而h2则向下。

这是直播website to test

我制作图片以展示它应该如何运作

Answer 1

由于h2元素彼此不了解，我建议你给它们一个高度，否则你需要进行大量的标记更改

此处我将height: 28px;添加到.row-home .text h2规则

.row-home .text {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    position: relative;
    text-align: center;
    padding: 10px 20px 30px;
    margin: 0px auto 40px;
    width: 100%;
    height: 100%;
    max-width: 236px;
    z-index: 1;
}

.row-home .text h2 {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
    position: relative;
    color: white;
    font-size: 14px;
    height: 28px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 0px;
        z-index: 2;
    }
.row-home .text h3 {
    position: relative;
    color: white;
    font-size: 12px;
    text-align: justify;
    text-transform: uppercase;
    text-align-last: center;
    z-index: 2;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="row row-home">
    <div class="col-sm-4">
      <a href="/oferta.html#schody" title="Kliknij, aby dowiedzieć się wiecej."><img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Schody" class="center-block img-responsive" /></a>
      <div class="text">
        <h2><a href="/oferta.html#schody" title="Kliknij, aby dowiedzieć się wiecej.">Schody</a></h2>
        <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
      </div>
    </div>
    <div class="col-sm-4">
      <a href="/oferta.html#balustrady-i-ogrodzenia" title="Kliknij, aby dowiedzieć się wiecej."><img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Balustrady" class="center-block img-responsive" /></a>
      <div class="text">
        <h2><a href="/oferta.html#balustrady-i-ogrodzenia" title="Kliknij, aby dowiedzieć się wiecej.">Balustrady i ogrodzenia</a></h2>
        <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
      </div>
    </div>
    <div class="col-sm-4">
      <a href="/oferta.html#meble" title="Kliknij, aby dowiedzieć się wiecej."><img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Meble" class="center-block img-responsive" /></a>
      <div class="text">
        <h2><a href="/oferta.html#meble" title="Kliknij, aby dowiedzieć się wiecej.">Meble</a></h2>
        <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
      </div>
    </div>
  </div>
</div>

使用基于评论的第二个版本更新

如果你想让它真正动态，你需要像这样分解它，你可以在那里制作col-sm-4弹性项目

使用媒体查询再次更新，以利用Flexbox的order属性并在较小的屏幕上重新定位元素

.row-home {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.row-home .col-sm-4 {
  min-width: 0;
  flex-basis: 33%;
  padding: 10px 20px 30px;
}

.row-home .col-sm-4.vcentered {
  align-self: center;
}

.row-home .col-sm-4 h2 {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

.row-home .col-sm-4 h3 {
  font-size: 12px;
  text-align: justify;
  text-transform: uppercase;
  text-align-last: center;
}

@media (max-width: 600px) {
  .row-home .col-sm-4 {
    flex-basis: 51%;
  }
  .row-home .col-sm-4 * {
    text-align: center;
  }
  .row-home .col-sm-4:nth-child(3n+1) {
    order: 1;
  }
  .row-home .col-sm-4:nth-child(3n+2) {
    order: 2;
  }
  .row-home .col-sm-4:nth-child(3n+3) {
    order: 3;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row row-home">
    <div class="col-sm-4">
      <a href="/oferta.html#schody" title="Kliknij, aby dowiedzieć się wiecej."><img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Schody" class="center-block img-responsive" /></a>
    </div>
    <div class="col-sm-4">
      <a href="/oferta.html#balustrady-i-ogrodzenia" title="Kliknij, aby dowiedzieć się wiecej."><img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Balustrady" class="center-block img-responsive" /></a>
    </div>
    <div class="col-sm-4">
      <a href="/oferta.html#meble" title="Kliknij, aby dowiedzieć się wiecej."><img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Meble" class="center-block img-responsive" /></a>
    </div>

    <div class="col-sm-4 vcentered">
      <h2><a href="/oferta.html#schody" title="Kliknij, aby dowiedzieć się wiecej.">Schody this is some extra text I added for test</a></h2>
    </div>
    <div class="col-sm-4 vcentered">
      <h2><a href="/oferta.html#balustrady-i-ogrodzenia" title="Kliknij, aby dowiedzieć się wiecej.">Balustrady i ogrodzenia</a></h2>
    </div>
    <div class="col-sm-4 vcentered">
      <h2><a href="/oferta.html#meble" title="Kliknij, aby dowiedzieć się wiecej.">Meble</a></h2>
    </div>

    <div class="col-sm-4">
      <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit.</h3>
    </div>
    <div class="col-sm-4">
      <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
    </div>
    <div class="col-sm-4">
      <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
    </div>

  </div>
</div>