Problème site

Par matbkoff, il y a 8 ans

Les bases HTML/CSS

Bonjour, je cherhce à positionner 3 div côte à côte, j'utilise pour cela flex et la fonction wrap sur css.

<div id="conteneur"> <div id="global" class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="./resources/css/img/imagetest.jpg" alt="4MDEV"> <div class="caption"> <h3> ceci est un test, </h3> <p> Desc produit </p> <p><a href="#" class="btn btn-primary" role="button"> Fiche d&eacutetaill&eacutee</a> <a href="#" class="btn btn-default" role="button"> Acheter </a></p> </div> </div> </div> </div> <div id="global" class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="./resources/css/img/imagetest.jpg" alt="4MDEV"> <div class="caption"> <h3> ceci est un test, </h3> <p> Desc produit </p> <p><a href="#" class="btn btn-primary" role="button"> Fiche d&eacutetaill&eacutee</a> <a href="#" class="btn btn-default" role="button"> Acheter </a></p> </div> </div> </div> </div> <div id="global" class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="./resources/css/img/imagetest.jpg" alt="4MDEV"> <div class="caption"> <h3> ceci est un test, </h3> <p> Desc produit </p> <p><a href="#" class="btn btn-primary" role="button"> Fiche d&eacutetaill&eacutee</a> <a href="#" class="btn btn-default" role="button"> Acheter </a></p> </div> </div> </div> </div> </div> </div>

Je voudrais que les div soit côte à côte parfaitement aligner ...

#global { height: 200px; width: 100%; } #conteneur { flex: wrap; }

Malheursement .. j'obtiens : http://image.noelshack.com/fichiers/2017/22/1496257600-aaaaaaaaaaaaaaaaaaaaaaaaaaaa.png

merci de votre aide ! :PEACE

4 réponses

matbkoff, il y a 8 ans

Le problème de cela c'est que ça rétrécit l'intégralité de mes blocs sans que je puisse modifié leurs tailles ..*

  • : mais cela les positionnes côtes à côtes comme demandés, MAIS cela les rétrécit ...
tomazn, il y a 8 ans

Bonjour,
je pense que tu as confondu avec display:flex. Essaye d'ajouter ça :

#conteneur { display:flex; }
matbkoff, il y a 8 ans

J'ai réussi avec :

#conteneur { display: nowrap; }

et

<div id="conteneur"> <div id="global" id="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="./resources/css/img/imagetest.jpg" alt="4MDEV"> <div class="caption"> <h3> ceci est un test, </h3> <p> Desc produit </p> <p><a href="#" class="btn btn-primary" role="button"> Fiche d&eacutetaill&eacutee</a> <a href="#" class="btn btn-default" role="button"> Acheter </a></p> </div> </div> </div> </div> <div id="global" id="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="./resources/css/img/imagetest.jpg" alt="4MDEV"> <div class="caption"> <h3> ceci est un test, </h3> <p> Desc produit </p> <p><a href="#" class="btn btn-primary" role="button"> Fiche d&eacutetaill&eacutee</a> <a href="#" class="btn btn-default" role="button"> Acheter </a></p> </div> </div> </div> </div> <div id="global" id="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="./resources/css/img/imagetest.jpg" alt="4MDEV"> <div class="caption"> <h3> ceci est un test, </h3> <p> Desc produit </p> <p><a href="#" class="btn btn-primary" role="button"> Fiche d&eacutetaill&eacutee</a> <a href="#" class="btn btn-default" role="button"> Acheter </a></p> </div> </div> </div> </div> </div> </div>

Merci quand même de votre aide !
Lien utile : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

Florian.C, il y a 8 ans

N'oubli pas de mettre ton topic en résolu ;)

PS: Ton titre est super ahah