两行之间的间距问题 - HTML模板

Question

我在HTML模板中的两行/元素之间存在间距问题。我正在尝试为我们餐厅的产品创建网格，并从互联网上下载模板。正如你在这张图片中看到的那样：issue1

尝试在文本中添加新行时，我遇到第一行和第二行元素之间的间距问题。这些行与p元素一起添加，当这样做时，整个第二行只会下降太多空间。

这是我正在使用的HTML（问题版本与非发行版本）

                <div class="col-12 col-sm-6 col-lg-4">
                <div class="single-best-receipe-area mb-30">
                    <img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798850_001.jpg?_=1527527264626" width=290px height=304px alt="" class="center-block" />
                    <div class="receipe-content">
                            <h5 style="line-height: 0px;">Barilla - Penne Rigate fără gluten 400g</h5> <p style="color:#ff9400; text-decoration: line-through;" >14,00 RON</p> <p style="color:#ff9400; line-height: 0px;"> REDUCERE 10% - 12,00 RON</p>
                    </div>
                </div>
            </div>

            <!-- Single Best Receipe Area -->
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="single-best-receipe-area mb-30" >
                    <img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798854_001.jpg?_=1505902808944" width=320px height=304px alt="" class="center-block" />
                    <div class="receipe-content">
                        <a href="receipe-post.html">
                            <h5>Barilla - Spaghetti fără gluten 400g</h5>
                        </a>
                    </div>
                </div>
            </div>

以下是我添加的自定义CSS：

.single-best-receipe-area .receipe-content {
padding-top: 30px;
text-align: center;
}
.mb-30 {
vertical-align: middle;
margin: 0 auto;
}
.receipe-content {
line-height: 0px;
}

正如你所看到的，我已经尝试了在stackoverflow上使用line-height：0px，但没有成功。不幸的是，我不是网站开发人员，只是想为我们的餐厅创建一个菜单列表。非常感谢帮助。谢谢！

编辑：演示代码：http://hanulsiminica.ro/test/menu.html

编辑2：更具代表性的问题形象：issue2

Answer 1

只使用你提供的代码，将html更改为this，将'flex-height'类添加到第一个div，当前类为'row'：

<div class="row flex-height">
    <div class="col-12 col-sm-6 col-lg-4">
                    <div class="single-best-receipe-area mb-30">
                        <img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798850_001.jpg?_=1527527264626" width=290px height=304px alt="" class="center-block" />
                        <div class="receipe-content">
                                <h5>Barilla - Penne Rigate fără gluten 400g</h5> <p style="color:#ff9400; text-decoration: line-through;" >14,00 RON</p> <p style="color:#ff9400;"> REDUCERE 10% - 12,00 RON</p>
                        </div>
                    </div>
                </div>

                <!-- Single Best Receipe Area -->
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="single-best-receipe-area mb-30" >
                        <img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798854_001.jpg?_=1505902808944" width=320px height=304px alt="" class="center-block" />
                        <div class="receipe-content">
                            <a href="receipe-post.html">
                                <h5>Barilla - Spaghetti fără gluten 400g</h5>
                            </a>
                        </div>
                    </div>
                </div>
</div>

和CSS到这个：

.single-best-receipe-area{
  text-align:center;
  line-height:30px;
  padding-top:20px;
}
.receipe-content{
  padding-top:30px;
}
.row.flex-height {
  display: flex;
  flex-wrap: wrap;
}
.row.flex-height > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

给出更好看的结果。这里的JSFiddle示例（尝试调整浏览器的大小，看看它在越来越大的屏幕上的外观） - New JSFiddle

希望这可以帮助。

Answer 2

.card-img {display：flex; flex-wrap：wrap; }

Barilla - Penne Rigate fără gluten 400g 14,00 RON REDUCERE 10% - 12,00 RON Barilla - Spaghetti fără gluten 400g Barilla - Spaghetti fără gluten 400g

Answer 3

<style>
  .single-best-receipe-area .receipe-content {
    padding-top: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
</style>