Discussion :

[thirt]

Bonjour à tous,

je suis face à un problème dont j'aimerais avoir votre avis.

En fait, j'aurais une grid à 2 colonnes. Dans la 1ère, colonne, j'aurai les images concernant l'article qui défileront et, dans la 2ème colonne, j'aurai l'article en lui-même.

Il peut arriver que je n'aie aucune photo pour un article. Dans ce cas-là, j'aimerais que l'article occupe les 2 colonnes.

Est-ce facile de faire cela avec les grids ?

Merci d'avance

Bonne journée
Thierry

[Invité]

Bonjour,

tu n'as toujours pas de code à montrer ?

[thirt]

Bonjour Jérôme,

merci pour votre réponse.

En effet, j'ai déjà eu l'occasion de faire une partie avec les grids mais je me demandais simplement comment faire pour rendre une colonne facultative et que l'autre colonne prenne toute la largeur dans ce cas-là.

Je continue mes recherches de mon côté.

Bon dimanche.
Thierry

[ma5t3r]

Salut, oui, c'est facile mais pas directement en CSS
Seul un test au préalable via le PHP pourra te permettre d'appliquer telle ou telle classe CSS ou construction HTML

[NoSmoking]

Bonjour,

Salut, oui, c'est facile mais pas directement en CSS

je ne vois pas en quoi cela ne serait pas réalisable directement en CSS.

N'ayant pas la structure HTML de base on va considérer que l'on a quelque chose comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!-- avec image -->
<article>
    <img src=" ... " alt=" ... ">
    <p>Lorem ipsum ... </p>
</article>
<!-- sans image -->
<article>
    <p>Lorem ipsum ... </p>
</article>

Plusieurs possibilités sont offertes dans ce cas.

On va exclure ici l’utilisation des grids, plutôt applicable au gabarit de mise en page.
Il nous reste

• display:flex, adapté en considérant que chaque <article> est un composant ;
• display:table sur les <article> et display:table-cell sur ses enfants directs ;
• float:left sur les <img> des <article>.

cela semble suffisant pour résoudre cette présentation.

[Invité]

On va exclure ici l’utilisation des grids, plutôt applicable au gabarit de mise en page.

+10

Pourtant, j'ai essayé de lui faire comprendre, mais non...