Блог

У меня очень простой вопрос, который я не могу понять, почему это происходит. 2 <span> тега должны быть друг под другом, но они находятся рядом друг с другом. Я уже пытался установить ширину на 100%, но все равно не повезло. Я хочу, чтобы заголовок и значение были в центре, но заголовок должен использовать 30% высоты, а значение 70% высоты. Как я могу это исправить?

 .activity-24h .stat-frame {
    position: relative;
    width:calc(100% / 5 - (4 * 2px));
    display: flex;
    justify-content: center;
}

.activity-24h .stat-frame-title {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    width: 100%;
    height: 30%;
}

.activity-24h .stat-frame-value {
    color: #d81e05;
    font-size: 28px;
    font-weight: bold;
    width: 100%;
    height: 70%;
}  

 <div class="stat-frame">
    <span class="stat-frame-title">Actieve gebruikers</span>
    <span class="stat-frame-value">1054</span>
</div>  

Попробуйте flex-direction: column .stat-frame оболочку.

Тег по умолчанию является встроенным элементом: https://www.w3schools.com/html/html_blocks.asp

чтобы элемент занимал целую строку, которую вы могли бы использовать display: block; , или просто измените интервалы на divs

попробуйте это:

 <div class="stat-frame">
    <span class="stat-frame-title">Actieve gebruikers</span>
<br/>
    <span class="stat-frame-value">1054</span>
</div>
  

А для текста я предлагаю

создайте класс :

 className{
text-align:center;
}
  

и используйте его как:

 <div class="stat-frame">
    <span class="stat-frame-title className">Actieve gebruikers</span>
<br/>
    <span class="stat-frame-value">1054</span>
</div>
  

промежутки являются встроенными элементами и будут пытаться занимать столько места, сколько им нужно, и не вызовут разрыва строки.

divs — это блочные элементы, которые будут пытаться занять всю строку.

Если вы измените интервалы на divs, они будут складываться, и каждый будет находиться на своей отдельной строке.

https://www.w3schools.com/html/html_blocks.asp