Forum : Problème site

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

tomazn

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

#conteneur
{
    display:flex;
}

matbkoff

Auteur

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

matbkoff

Auteur

J'ai réussi avec :

#conteneur

{

    display: nowrap;

}

<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

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

PS: Ton titre est super ahah

Problème site

4 réponses