Как установить дату над месяцем в графическом отображении?

Question

Виолетта

wordpress , php

Как установить дату над месяцем в графическом отображении?

Здравствуйте! <br/> Можете, пожалуйста, подсказать, как разместить дату над месяцем в разметке? <br/> В частности, у меня есть следующий код: <br/> <pre><code class="html">&lt;div class="new-front-cart__span"&gt;
		&lt;span class="new-date__number"&gt;13&lt;/span&gt;
		&lt;span class="new-date__month"&gt;октября&lt;/span&gt;
	&lt;/div&gt;</code></pre> <br/> Мне нужно, чтобы элементы отображались друг над другом, как в следующем примере: <br/> <blockquote>12<br/>
Июля</blockquote> <br/> Я использую ACF для вывода даты. Учитывая, что CSS у этих элементов различный, я назначаю им разные классы. Но как мне организовать это в HTML, учитывая, что в ACF я просто выбираю дату и всё?

27 сентября 2024 г. 17:53

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы разместить дату над месяцем в графическом отображении, вы можете использовать CSS для изменения ориентации элементов. Учитывая ваш текущий код, вам нужно будет изменить HTML немного и добавить стили. 

Вот как это можно сделать:

### HTML

Никаких значительных изменений не требуется, вы можете оставить структуру такой же:

```html
<div class="new-front-cart__span">
    <span class="new-date__number">13</span>
    <span class="new-date__month">октября</span>
</div>
```

### CSS

Добавьте следующий CSS для того, чтобы элементы отображались друг над другом:

```css
.new-front-cart__span {
    display: flex;
    flex-direction: column; /* Позволяет расположить элементы вертикально */
    align-items: center; /* Выравнивает элементы по центру */
}

.new-date__number {
    font-size: 24px; /* Установите размер шрифта по желанию */
    font-weight: bold; /* Сделайте номер даты жирным, если нужно */
}

.new-date__month {
    font-size: 16px; /* Размер шрифта для месяца */
}
```

### Пояснение:

- `display: flex;` устанавливает для контейнера flex-контейнер, что позволяет легко управлять расположением элементов.
- `flex-direction: column;` заставляет flex-элементы (в данном случае ваши числа и месяцы) располагаться в колонку (вертикально).
- `align-items: center;` выравнивает элементы по центру по горизонтали, чтобы они красиво смотрелись друг под другом.

Таким образом, при применении данного CSS элементы вашего HTML будут отображаться так, как вы хотите. Если вы используете ACF для ввода даты, это изменение будет работать, так как оно применяется ко всему контейнеру независимо от того, как вы получаете содержимое.

Answer 2

<?php
// Получаем значение даты из ACF
$date = get_field('data_cont_front');

// Разделяем дату на число и месяц
$date_parts = explode(' ', $date);
$day = $date_parts[0];  // Число
$month = $date_parts[1];  // Месяц

// Выводим с нужной разметкой
?>
<div class="new-front-cart__span">
    <span class="new-date__number"><?php echo $day; ?></span>
    <span class="new-date__month"><?php echo $month; ?></span>
</div>