代码之家 › 专栏 › 技术社区 › flash

如何在css中移动列内容?

multiple-columns wordpress css html php

flash · 技术社区 · 7 年前

我正在一个网站上工作,我想把文本移到左边底部是css。下面是我想做的截图。

如上面的截图所示,我想移动爆发文本朝向左侧底部( 在字符下方对齐 O ).以上截图显示在本文档中 link .

我创造了 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代码中或者在不停摆弄这样突出的文本就会向左侧底部移动

3 回复 | 直到 7 年前

sampath kumara 7 年前

最简单的方法。

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

fazrinwiraman 7 年前

我已经检查了你的代码,你似乎有点错了:

<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 为了更好的理解。

TylerH Ash Burlaczenko 7 年前

我建议您尝试使用flexbox,也许它可以这样工作:

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

也许你会想加上:

justify-content: center;

物业中心 li 一旦他们在一起。