Как переместить содержимое столбца в css?
Я работаю над веб-сайтом, на котором хочу переместить текст к нижней части левая сторона в css. Ниже скриншот, что я хочу сделать.
Как показано на снимке экрана выше, я хочу переместить текст взрыв в левую нижнюю часть (Выровнено по символуО). Приведенный выше скриншот присутствует в этом ссылка на сайт.
Я также создал рабочий пример для приведенной выше ссылки.
HTML-код, используемый в рабочий пример, создается с помощью следующего php-код:
<ul id = "shows-list" class = "shows-list cf js-list-active">
<?php foreach ( $alpha_programs as $title => $permalink ) :
$title_char = substr( $title, 0, 1 ); ?>
<li class = "shows-list__letter">
<?php
if ( $title_char !== $prev_title_char ) : $prev_title_char = $title_char; ?>
<h1 class = "shows-list__letter-title"><?php echo esc_html( $title_char ) ?></h1>
<?php endif;?>
<a class = "shows-list__link" href = "<?php echo esc_url( $permalink ); ?>"><h2 class = "shows-list__title"><?php echo esc_html( $title ); ?></h2>
</a>
</li>
<?php
endforeach;
?>
</ul>
Постановка задачи:
Мне интересно, какие изменения мне нужно внести в php-код выше или в код css здесь, в рабочий пример, чтобы текст вспышки перемещался к левому нижнему краю.
@Raptor HTML-код, который я включил здесь, генерируется во время выполнения с помощью php выше. Есть некоторые изменения, которые мне нужно сделать в php 1st.
Ответы 3
Я бы посоветовал вам попробовать использовать flexbox, возможно, это могло бы работать так:
ul #shows-list {
display: flex;
flex-direction: column;
}
Возможно, вы захотите добавить:
justify-content: center;
свойство центрировать li, когда они находятся друг под другом.
Мне интересно, можете ли вы обновить его в скрипке. Таким образом, это было бы легко визуализировать.
Я пытался внести изменения в рабочий пример здесь, но, похоже, это не сработало.
Самый простой способ сделать это.
<body>
<table>
<tr>your content</tr>
<tr>your content</tr>
</table>
</body>Нет, абсолютно нет. Сейчас 2019 год. Использование таблицы противоречит адаптивному дизайну.
Я проверил ваш код, и кажется, что вы немного ошиблись здесь:
<ul id = "shows-list" class = "shows-list cf js-list-active">
<li class = "shows-list__letter">
<h1 class = "shows-list__letter-title">B</h1>
<a class = "shows-list__link" href = "http://www.cpac.ca/en/programs/beyond-politics/"><h2 class = "shows-list__title">Beyond Politics</h2></a>
</li>
<li class = "shows-list__letter">
<a class = "shows-list__link" href = "http://www.cpac.ca/en/programs/british-prime-ministers-question-time/"><h2 class = "shows-list__title">British Prime Minister’s Question Time</h2></a>
</li>
<li class = "shows-list__letter">
<a class = "shows-list__link" href = "http://www.cpac.ca/en/programs/builders-of-canada/"><h2 class = "shows-list__title">Builders of Canada</h2></a>
</li>
</ul>
Список для ссылок находится в том же списке, что и алфавит. Вы должны создать новый список ссылок внутри списков алфавитов. Нравится :
<ul id = "shows-list" class = "shows-list cf js-list-active">
<li class = "shows-list__letter">
<h1 class = "shows-list__letter-title">B</h1>
<ul class = "shows-list__letter_list">
<li class = "shows-list__letter_inside">
<a class = "shows-list__link" href = "http://www.cpac.ca/en/programs/beyond-politics/"><h2 class = "shows-list__title">Beyond Politics</h2></a>
</li>
<li class = "shows-list__letter_inside">
<a class = "shows-list__link" href = "http://www.cpac.ca/en/programs/british-prime-ministers-question-time/"><h2 class = "shows-list__title">British Prime Minister’s Question Time</h2></a>
</li>
<li class = "shows-list__letter_inside">
<a class = "shows-list__link" href = "http://www.cpac.ca/en/programs/builders-of-canada/"><h2 class = "shows-list__title">Builders of Canada</h2></a>
</li>
</ul>
</li>
</ul>
Что я сделал, так это то, что все ссылки для алфавита помещаются в новый тег списка внутри списка алфавитов. Извините за мой плохой английский. Вы можете проверить этот рабочий пример для лучшего понимания.
Причина проблемы в том, что HTML разделяет теги
<li>на 2 столбца поровну (каждый столбец имеет одинаковое/равное количество элементов) без учета контекста (группировка первого символа каждого содержимого). Чтобы решить эту проблему, самый простой способ — сначала сгруппировать содержимое каждого символа в 1<div>или<li>(ваш выбор не имеет большого значения, если вы правильно стилизуете их с помощью CSS), а затем использовать flexbox, чтобы разрешить автоматическое преобразование. - оформление макета. Наконец, ради SEO, недопустимо использовать несколько<h1>на одной странице; попробуйте вместо этого использовать<h2>для<h6>.