Question

我在HTML模板中两行/元素之间的间距有问题。我正在尝试为我们餐厅的产品创建网格，并从Internet下载了模板。如您在这张图片中看到的： 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;
}

如您所见，我已经尝试过使用line-height：0px在stackoverflow上找到的内容，但是没有成功。不幸的是，我不是Web开发人员，只是尝试为我们的餐厅创建菜单列表。帮助将不胜感激。谢谢！

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

EDIT2：问题的更具代表性的图片：issue2

Answer 1

仅使用您提供的代码，将html更改为此，即可在当前类为“ row”的第一个div中添加“ flex-height”类：

<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

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

Answer 3

.card-img { 显示：flex; flex-wrap：包装; }

Barilla-Penne Rigatefără面筋400g 14,00 RON

减少10％-12,00 RON

Barilla-意大利面条意粉400g Barilla-意大利面条意粉400g

两行间距问题-HTML模板

3 个答案: