如何在css中移动列内容？答案

【问题标题】：How to move the column content in css?如何在css中移动列内容？
【发布时间】：2019-02-11 22:06:18
【问题描述】：

我正在开发一个网站，我想在其中将文本移到 CSS 中的左侧底部。下面是我想要做的截图。

如上图所示，我想将Outburst文字移到左下角（对齐字符下方O） .上面的屏幕截图出现在这个link 中。

我也为上述链接创建了fiddle。

fiddle中使用的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 代码或fiddle 中的 css 代码中进行哪些更改，以便爆发文本向左侧底部移动

【问题讨论】：

问题的原因是HTML将<li>标签平均分为2列（每列有相似/相等数量的项目），而不考虑上下文（每个第一个字符的分组内容）。要解决这个问题，最简单的方法是先将每个字符的内容分组为1个<div>或<li>（你的选择，并不重要，只要你使用CSS正确设置它们的样式即可），然后使用flexbox允许自动重新排列布局。最后为了SEO，在同一页面中使用多个<h1>是不合适的；尝试改用<h2> 到<h6>。
@Raptor 我已经包含here的html是在运行时通过上面的php生成的。我需要在 php 1st 中进行一些更改。

标签： php html css wordpress multiple-columns

【解决方案1】：

执行此操作的最简单方法。

<body>
<table>
<tr>your content</tr>
<tr>your content</tr>
</table>
</body>

【讨论】：

不不，绝对不。现在是2019年。使用表格是违反响应式设计的。

【解决方案2】：

我已经检查了您的代码，您的代码似乎有点错误：

<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>

我所做的是，字母表的所有链接都放在字母表列表内的一个新列表标签中。对不起，我的英语不好。您可以查看此fiddle 以获得更好的理解。

【讨论】：

【解决方案3】：

我建议你尝试使用 flexbox，也许它可以像这样工作：

ul #shows-list {
   display: flex;
   flex-direction: column;
 }

也许你会想添加：

justify-content: center;

属性使lis 在彼此下方时居中。

【讨论】：

我想知道你是否可以在小提琴中更新它。这样一来，可视化就很容易了。
我尝试在此处更改fiddle，但似乎不起作用。