CSS - Deux div l'un à côté de l'autre ?

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

J’ai le code HTMl suivant :

1
2
3
4
5
6
<article class="post">
    <div class="thumbnail">
    </div>
    <div class="contenu">
    </div>
</article>

Je souhaiterai avoir ma thumbnail sur la gauche, et mon contenu sur la droite. J’utilise donc ce CSS :

1
2
3
4
.thumbnail
{
float: left;
}

Cependant, en faisant cela, je ne peux pas appliquer de margin à mon élément "droite". Si je fais :

1
2
3
4
.contenu
{
margin-left: 10px;
}

Les 10px ne prenne pas en compte la div flotante. Je n’ai pas mes deux div espacés de 10px comme je le voudrais. Comment faire ?

Merci

Mon blog de réseau et informatique https://blog.network-berry.net

+0 -0
Auteur du sujet

Merci ! Pour être plus précis, j’ai ceci :

1
2
3
4
5
<div class="content">
    <div class="thumbnail"></div>
        <h1 class="titre_article">mon titre></h1>
        <p class="propriete_article">Ma date, ect</p>
</div>

Par exemple, avec ton article, j’ai choisi de mettre le css suivant :

1
2
3
4
.content
{
display: flex;
}

Bien que la thumbnail et le titre sont maintenant sur la même ligne, les propriètés sautent une ligne. Je ne comprends pas trop, avec cette prioriété tout devrait être sur la même ligne (en taille ça tient) ?

Mon blog de réseau et informatique https://blog.network-berry.net

+0 -0
Auteur du sujet

Étrange, voici ce que j’ai chez moi :

Image utilisateur

L’image correspond au div "thumbnail", test à la balise h1 et la date au paragraphe. Pourtant remarquez que la date ne passe pas à droite du titre test alors qu’il y a la place. J’ai simplement mis le css avec display: flex; Du coup je ne comprends plus trop. Si je comprends bien, cela devrait faire comme sur le code de melepe et tout afficher sur une ligne.

Edit: J’ai trouvé mon erreur : les deux élements h1 et p étaient imbriqué dans un div supplémentaire (content):

1
2
3
4
5
6
<article class="post">
    <div class="thumbnail">
    </div>
    <div class="content">
        <h1 class="titre_article"></h1>
        <p class="propriete_article"></p>

Le flex agissait pour thumbnail et content mais pas pour les "sous" blocks.

Édité par Nicox11

Mon blog de réseau et informatique https://blog.network-berry.net

+0 -0
Auteur du sujet

Pourquoi ces dislikes sur mon post ? L’op connaît peut-être pas. Et qui fait encore du vanilla CSS aujourd’hui ?

Society

Juste un lien, aucune phrase… C’est un peu brutal, surtout pour quelque chose qui n’a pas vraiment de rapport avec ma demande. Je connais bootstrap et je fais encore du CSS vanilla pour mon thème WordPress. Je pense que ton post aurait été mieux accueilli avec du texte avec.

Mon blog de réseau et informatique https://blog.network-berry.net

+0 -0

Pourquoi ces dislikes sur mon post ? L’op connaît peut-être pas. Et qui fait encore du vanilla CSS aujourd’hui ?

Society

J’ai un peu l’impression que tu confonds. La grande majorité des gens qui ne connaissent pas trop CSS/LESS/SASS et compagnie utilisent bootstrap, bulma et compagnie. La grande majorité des gens dont le boulot c’est CSS/LESS/SASS n’utilisent pas bootstrap, bulma et compagnie. Ils ne font pas tous du CSS vanilla, bien sûr, la majorité d’entre eux utilisent des choses comme LESS ou SASS, mais tous pourraient écrire du CSS vanilla, c’est leur expertise les feuilles de style. Mais ils n’utilisent pas bootstrap.

Et surtout, pour apprendre le CSS, il faut faire du CSS. Et Nicox11 n’a pas dit explicitement qu’il ne souhaitait pas apprendre le CSS, laissons-lui le bénéfice du toute, il est sur un site de partage de connaissance où il pose une question de CSS, si ça se trouve le CSS l’intéresse… :)

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte