将标题和按钮与CSS中的兄弟姐妹对齐

Question

我希望能够在css中设置min-margin或类似的内容。

这不是理想的选择：

正如您所看到的，从图片标题到按钮的边距不同，取决于是否有价格，所以并非所有按钮都在同一行。

如果我将margin-top添加到按钮，或margin-bottom添加到标题，则会更改整个按钮组：

并且我无法定位特定ID ，因为有很多产品没有价格，在每个循环中它随机带来四个。

对此有什么好的和简短的解决方案吗？

Answer 1

只需将块包装器放入价格（即使没有价格）并为其设置高度。

Answer 2

您可以将子项目的flex用于具有可靠设计：

.parent{
  display: flex;
  justify-content: space-around;
}
.child{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 20%;
}
.wrapper{
  
}
.button{
  background: #cdcdef;
}

<div class="parent">
  <div class="child">
    <div class="wrapper">
      <img src="http://placehold.it/100x100">
      <P>this is some short text</p>
    </div>
    <div class="button">Button</div>
  </div>
  <div class="child">
    <div class="wrapper">
      <img src="http://placehold.it/100x100">
      <P>this is some long very long and even more long text, but this is some long very long and even more long text</p>
    </div>
    <div class="button">Button</div>
  </div>
  <div class="child">
    <div class="wrapper">
      <img src="http://placehold.it/100x100">
      <P>this is some short text</p>
    </div>
    <div class="button">Button</div>
  </div>
  <div class="child">
    <div class="wrapper">
      <img src="http://placehold.it/100x100">
      <P>this is some short text</p>
    </div>
    <div class="button">Button</div>
  </div>
</div>