html - 将动态内容子项垂直对齐到中间，但在整行中共享相同的 "middle baseline"

Question

如果有人对问题有更好的措辞，请编辑，我正在努力寻找答案时甚至搜索什么。

我有多行，每行三列。每列都有一个标题和描述。长度是动态的，我想将它们全部对齐到中间。但是，我希望所有内容均匀对齐 - 因此标题排成一行，描述排成一行。我正在使用 Bootstrap 4 网格。

我想要什么

但是，我找不到任何简单的方法来解决这个问题。我有点想通了使用绝对位置，但它会导致 child 超出他们的 parent ，并产生一些问题。

HTML

<!-- lots of these -->
<article>
    <h3>Dynamic title</h3>
    <p>description</p>
    <div class="hidden">
        <h3>Dynamic Title</h3>
        <p>description</p>
    </div>
</article>

CSS

article { position:relative; padding-top:30px; display:flex; }
.hidden { opacity:0; visibility:hidden; }
article > h3 { position:absolute; bottom:50%; padding-top:inherit; padding-right:inherit; }
article > p { position:absolute; top:50%; padding-right:inherit; }

如果你看这个fiddle但是，我无法控制每行之间的间距。绝对位置将元素拉出它们的位置。它使这个解决方案看起来不合格。

有没有更好的方法来做到这一点？我不介意在必要时使用 JS(或作为调整)。

Answer 1

如果你去自定义而不是 Bootstrap (因为你没有提到你使用的是哪个版本的 Bootstrap 。)。如果您的段落高度相同。

HTML 会喜欢这样。

<div class="article">
    <div class="box">
        <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
    </div>
    <div class="box">
        <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
    </div>
    <div class="box">
        <h1>Lorem Ipsum is simply dummy text of the printing and</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
    </div>
</div>

CSS 会喜欢这样

.article {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto; }

.article .box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-basis: 33.333%;
      -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
     -moz-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  max-width: 33.333%;
  padding-left: 15px;
  padding-right: 15px; }

@media (max-width: 767px) {
  .article .box {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    max-width: 100%; } }

.article .box h1 {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  border: 1px solid green;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%; }

这里是 Demo

如果您使用 Bootstrap 4。Example

我使用 jQuery 做了一个解决方案。检查上面的 Bootstrap 4 示例

jQuery 脚本

$('.eh').each(function(){  

  var $this = $(this);

  var equalHeightSelectors = $this.data('eh');

  $.each(equalHeightSelectors, function( index, value ) { 

    var min_height = 0;
    var $children = $this.find(value);
    $children.each(function(){
      var $el = $(this);
      if($el.height() > min_height){  
        min_height = $el.height();
      }
    });

    $children.height(min_height);

  });

});

Hope this help.