0

Возникла проблема с реализацией задачи.

Нужно реализовать вывод списка так, чтобы при добавлении 5 блоков с текстом в div текст отображался посередине и со шрифтом большого размера, а при добавлении 6 блока, текст перемещался во 2 колонку и в 2 колонках шло распределение по 3 текста в каждом, при этом размер текста должен уменьшаться.

Как реализовать такую задачу.

Прикрепил фото ниже, чтобы можно было увидеть.

Также вставлю код, который я уже реализовал, но он не имеет уменьшения текста при переносе во 2 блок, и не распределяется равномерно по 3 текста в 2 столбцах, при добавлении 6 текста.

<style>
.prcontainer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100rem;
  width: 24rem;
  padding: 5px;
  position: relative;
  gap: 5px;
  bottom: 0;
  top: 250px;
}
.pcdiv {
    position: relative;
    display: flex;
    height: 190px;
    padding: 0 50px;
    top: 118.06px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.pcstron {
    font-family: 'Muller';
    font-style: normal;
    font-weight: 800;
    font-size: 189.812px;
    line-height: 190px;
    margin-left: 90px;
    color: #FFFFFF;
}
.pcimglogo {
    margin-left: auto;
}
.pritem {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 190px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-template-rows: repeat(2,150px);
    grid-auto-flow: column;
    column-gap: 1rem;
    row-gap: 10px;
}
 
.pptem {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.ptem {
 
}
.pcp {
    font-family: 'Muller';
font-style: normal;
font-weight: 500;
font-size: 50px;
line-height: 61px;
margin-top: 0;
margin-bottom: 0;
}
.pcpp {
    font-family: 'Muller';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 41px;
    width: 778px;
    margin-top: 0;
}
.pcpc {
    font-family: 'Muller';
    font-style: normal;
    font-weight: 700;
    font-size: 90px;
    line-height: 125px;
    color: #E70808;
    width: 525px;
    margin-top: 0;
}
</style>
 
<div >
<div id="html-content-holder" style="  background-color: #F0F0F1; color: #00cc65; display: inline-block; position: relative; width: 2000px; height: 2000px;">
        <div class="pcdiv">
        <strong class="pcstron">Прайс</strong>
        <?
            
            
            if ($logo != '') {
                ?><img class="pcimglogo" src="<?=$logo['val']?>"><?
            }else{
                ?><img class="pcimglogo" src="/admin/dizain-market/generate.php?id_logo=0&title=Нейл Студио&txt=Студия наращивания ногтей"><?
            }
 
            ?>
        </div>
        <div class="prcontainer">
        <div class="pritem">
            <div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div>
        </div>
           <div class="pritem"><div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div></div>
           <div class="pritem"><div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div></div>
           <div class="pritem"><div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div></div>
            <div class="pritem"><div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div></div>
             </div>
 
    </div>
  </div> 

Отображение 5 блоков в 1 столбце

Отображение 6 блоков в 2 столбцах по 3 блока в каждом столбце

Отображение 3 блоков посередине

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.