html - 在同一行中显示 flex 几个带有文本的 block

标签 html css flexbox

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

对于潜台词，我想垂直到顶部。

这是我尝试使用的代码:

<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 在其中一个 block 中的文本较少，则该文本对齐到底部并且 h2 下降。

现场直播 website to test

我创建图片来展示它应该如何工作

description how it should work

最佳答案

由于 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 flex items

使用媒体查询再次更新，以利用 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>

关于html - 在同一行中显示 flex 几个带有文本的 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44705872/

上一篇：jquery - 如何在不移动html元素的情况下重置css关键帧动画

下一篇：html - 在 Bootstrap 中水平居中 div 元素？ (文本中心不工作)

相关文章：

html - 比屏幕大的 Flexbox child

html - 为什么为表格列设置 flex 显示会破坏表格结构？

javascript - 变量不断更新，没有任何代码表明

html - 使用 Flexbox 垂直居中列表项内容？

html - 阅读更多链接没有描述性文字

javascript - 为 chrome 扩展注入(inject) CSS

javascript - 如何从svg <a>点击加载div中的本地html

html - 填充范围控制跨浏览器的下部

html - 如何在 Angular 中使用 highcharts 圆环图

javascript - 将 PHP 替换为 JavaScript

©2024 IT工具网  联系我们