Dev Faq
0
votes

Comment déplacer le contenu de la colonne dans CSS?

Je travaille sur un site Web dans lequel je veux déplacer le texte vers le bas fort> bas gauche fort> en CSS. Vous trouverez ci-dessous la capture d'écran ce que je veux faire.

Entrez la description de l'image ici p>

comme indiqué dans la capture d'écran ci-dessus, je veux déplacer le texte explosion strong> vers le bas de gauche ( aligné sous le caractère em> o fort>). La capture d'écran ci-dessus est présente dans ce lien . p>

j'ai créé le Fiddle aussi pour le lien ci-dessus . P>

Le code HTML fort> utilisé dans le violon fort> est généré par le code PHP suivant strong> fort>: p> 

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

2 commentaires

La cause du problème est que le HTML divise les balises

  • dans 2 colonnes (chaque colonne a un nombre similaire / égal d'éléments), sans respecter le contexte (le regroupement du premier caractère de chaque contenu ). Pour résoudre ce problème, le moyen le plus simple est de regrouper le contenu de chaque caractère en 1
    ou
  • (Votre choix n'est pas important, Tant que vous les styez correctement en utilisant CSS), utilisez Flexbox pour autoriser la ré-arrangée automatique de la mise en page. Dernier pour SEO Sake, il est inapproprié d'utiliser plusieurs

    dans la même page; Essayez d'utiliser

    sur
    à la place.

    @Raptor the html que j'ai inclus ici est généré au moment de l'exécution PHP ci-dessus . Il y a quelques changements à faire dans PHP 1er.

    • 3 Réponses :

    0
    votes

    Je vous suggère d'essayer d'utiliser Flexbox peut-être que cela pourrait fonctionner comme ceci: xxx pré>

    peut-être que vous voudrez peut-être ajouter: P> 

    justify-content: center;

    2 commentaires

    Je me demande si vous pouvez le mettre à jour dans le violon. De cette façon, il serait facilement de visualiser.

    J'ai essayé de modifier le Fiddle ici mais cela ne semble pas fonctionner.

    0
    votes

    moyen le plus simple de le faire. 

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

    1 commentaires

    Non non, absolument non. C'est 2019 maintenant. L'utilisation de la table est contre la conception réactive.

    0
    votes

    J'ai vérifié votre code et il semble que vous en aviez un peu faux ici: xxx pré>

    liste des liens figure dans la même liste que l'alphabet. Vous devriez faire une nouvelle liste pour les liens dans les listes d'alphabets. Comme ceci: P> 

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

    0 commentaires

    Articles qui pourrait vous intéresser :

    Pourquoi est-ce que j'obtiens une erreur laravel lors de la création d'un nouveau projet?
    Select2 ne s'affiche pas correctement dans le mode bootstrap
    Laravel Echo n'écoute pas
    La validation de la demande de formulaire ne fonctionne pas. Il charge juste la page d'accueil dans Postman