如何将 div 行中的所有项目（图像、标题、文本、按钮）与 CSS 对齐？

Question

我知道这个话题已经有了答案，但我的情况有点不同。

您必须知道，不幸的是我无法编辑 HTML，因为我使用 Visual Composer for WordPress 生成它自己的 HTML。我只能在 WordPress 后台通过 Visual Composer 在 HTML 标签上添加类或 ID。编辑每个 Visual Composer 块的 HTML 会很长（使用 WordPress 文本模式）。所以我必须找到另一种有效的方法来做到这一点。

所以，为了对齐它们之间的所有项目，我尝试了很多解决方案：

我首先尝试在 parent div 上使用一个 min-height 设置为相对位置，然后我将按钮放在底部为 0 的绝对位置。它适用于按钮对齐，但我希望它是自动的并由自己管理，以防有更多文本内容并且我不想在几种响应模式下多次更改 min-height。

所以我尝试了的FlexBox方案。当我们只有一个图像、一个文本和一个按钮时，这个解决方案是有效的，但在我的例子中，我在每个图像和文本内容之间都有一个标题，所以这意味着我们可以在 1 行或 2 行或更多行上有一个标题......问题是它们之间的标题和"Lorem Ipsum" 还有短信。

我该如何管理它？

感谢您的帮助。

我提供了代码片段来查看我的问题：

.sameblockheight, .wpb_wrapper {
  display: flex;
  flex-direction: column;
}

.vc_column-inner {
  flex-grow: 1;
  display: flex;
}

.wpb_wrapper {
  flex-grow: 1;
  justify-content: space-between;
}

.subrow {
  display: flex;
}

.subrow > div {
  width: 200px;
}

.vc_column-inner {
  padding: 6% 8%;
}

.button-blue {
  text-align: center;
}

.alignnone {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div class="subrow">

 <div class="sameblockheight grid-col-3">
  <div class="vc_column-inner vc_custom_1530896965169">
   <div class="wpb_wrapper">
    <p>
     <img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </p>
    <h5 style="text-align: center;">Title on 1 line</h5>
    <p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur beatae officiis ea, corporis eos quas temporibus asperiores iste impedit laborum et non, itaque eaque dignissimos. Distinctio, quaerat vel consectetur! Pariatur.</p>
    <a class="button-blue" href="#">Learn more</a>
   </div>
  </div>
 </div>

 <div class="sameblockheight grid-col-3">
  <div class="vc_column-inner ">
   <div class="wpb_wrapper">
    <p>
     <img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </p>
    <h5 style="text-align: center;">Title on 2 lines ...............................</h5>
    <p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quas in quod quae magni eligendi dicta totam, placeat eveniet facere cupiditate natus aut, impedit incidunt error veritatis libero suscipit nisi.</p>
    <a class="button-blue" href="#">Learn more</a>
   </div>
  </div>
 </div>

 <div class="sameblockheight grid-col-3">
  <div class="vc_column-inner vc_custom_1530896977260">
   <div class="wpb_wrapper">
    <p>
     <img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </p>
    <h5 style="text-align: center;">Title on 3 lines ................ ................. ......................... ............... ...........</h5>
    <p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ullam optio quia nam aliquam numquam ipsa incidunt possimus consequatur sed animi hic facere mollitia facilis libero cupiditate eaque, molestiae voluptas!</p>
    <a class="button-blue" href="https://staging.unify.com/en/solutions/voice-platforms/preconfigured-unified-communications">Learn more</a>
   </div>
  </div>
 </div>

 <div class="sameblockheight grid-col-3">
  <div class="vc_column-inner vc_custom_1530896983086">
   <div class="wpb_wrapper">
    <p>
     <img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </p>
    <h5 style="text-align: center;">Title</h5>
    <p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui provident eum voluptas veritatis ducimus iste enim recusandae aliquid sequi ad sapiente dolore similique nihil eos placeat, consectetur odit beatae voluptatum?</p>
    <a class="button-blue" href="#">Learn more</a>
   </div>
  </div>
 </div>

</div>

Answer 1

我能想到的只有 CSS 的唯一解决方案是在您的标题 h5 中添加 min-height。例如，我添加了 min-height:40px，现在所有 h5 的高度都相等。你可以设置一个bigger/smaller一个。

缩减是，如果标题大于您设置的 min-height，您就会再次遇到该问题。

一个完整的解决方案是添加一点 javascript/jQuery 使 h5 的高度相等而不设置 'hardcoded' min-height。

如果您want/can使用javaScript/jQuery请告诉我，我会制定解决方案。如果没有，并且你只想使用 CSS，下面的解决方案是我唯一能想到的。

h5 {
 min-height:40px;
 margin-top:0;
}


.sameblockheight, .wpb_wrapper {
  display: flex;
  flex-direction: column;
}

.vc_column-inner {
  flex-grow: 1;
  display: flex;
}

.wpb_wrapper {
  flex-grow: 1;
  justify-content: space-between;
}

.subrow {
  display: flex;
}

.subrow > div {
  width: 200px;
}

.vc_column-inner {
  padding: 6% 8%;
}

.button-blue {
  text-align: center;
}

.alignnone {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div class="subrow">

 <div class="sameblockheight grid-col-3">
  <div class="vc_column-inner vc_custom_1530896965169">
   <div class="wpb_wrapper">
    <p>
     <img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </p>
    <h5 style="text-align: center;">Title on 1 line</h5>
    <p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur beatae officiis ea, corporis eos quas temporibus asperiores iste impedit laborum et non, itaque eaque dignissimos. Distinctio, quaerat vel consectetur! Pariatur.</p>
    <a class="button-blue" href="#">Learn more</a>
   </div>
  </div>
 </div>

 <div class="sameblockheight grid-col-3">
  <div class="vc_column-inner ">
   <div class="wpb_wrapper">
    <p>
     <img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </p>
    <h5 style="text-align: center;">Title on 2 lines ...............................</h5>
    <p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quas in quod quae magni eligendi dicta totam, placeat eveniet facere cupiditate natus aut, impedit incidunt error veritatis libero suscipit nisi.</p>
    <a class="button-blue" href="#">Learn more</a>
   </div>
  </div>
 </div>

 <div class="sameblockheight grid-col-3">
  <div class="vc_column-inner vc_custom_1530896977260">
   <div class="wpb_wrapper">
    <p>
     <img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </p>
    <h5 style="text-align: center;">Title on 3 lines ................ ................. ......................... ............... ...........</h5>
    <p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ullam optio quia nam aliquam numquam ipsa incidunt possimus consequatur sed animi hic facere mollitia facilis libero cupiditate eaque, molestiae voluptas!</p>
    <a class="button-blue" href="https://staging.unify.com/en/solutions/voice-platforms/preconfigured-unified-communications">Learn more</a>
   </div>
  </div>
 </div>

 <div class="sameblockheight grid-col-3">
  <div class="vc_column-inner vc_custom_1530896983086">
   <div class="wpb_wrapper">
    <p>
     <img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </p>
    <h5 style="text-align: center;">Title</h5>
    <p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui provident eum voluptas veritatis ducimus iste enim recusandae aliquid sequi ad sapiente dolore similique nihil eos placeat, consectetur odit beatae voluptatum?</p>
    <a class="button-blue" href="#">Learn more</a>
   </div>
  </div>
 </div>

</div>

如何将 div 行中的所有项目（图像、标题、文本、按钮）与 CSS 对齐？

How to align all items between them (images, titles, texts, buttons) in differents div's row with CSS?

css

flexbox

visual-composer