Проблема с расстоянием между двумя строками - HTML шаблон - PullRequest
Новая
       13

Проблема с расстоянием между двумя строками - HTML шаблон

0 голосов
/ 20 ноября 2018

У меня проблема с расстоянием между двумя строками / элементами в шаблоне 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: Более наглядное представление о проблеме: проблема2

Ответы [ 3 ]

0 голосов
/ 20 ноября 2018

Используя только предоставленный вами код, измените HTML на этот, чтобы добавить класс '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 здесь (попробуйте изменить размер своего браузера, чтобы увидеть, как он выглядит на экранах меньшего и большего размера) - Новый JSFiddle

Надеюсь, это поможет.

0 голосов
/ 20 ноября 2018

.card-img {display: flex;flex-wrap: обертывание;}

Barilla - Penne Rigate для глютена 400г 14,00 RON СНИЖЕНИЕ 10% - 12,00 RON Barilla - Спагетти для глютена 400г Barilla - Spaghetti fără клейковина 400г
0 голосов
/ 20 ноября 2018 
<style>
  .single-best-receipe-area .receipe-content {
    padding-top: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
</style>
...