Div alignés horizontalement et…

Version imprimable

06/04/2018, 10h31
Mister Paul

1 pièce(s) jointe(s)

Div alignés horizontalement et…

Bonjour,

je voudrais faire cette mise en page de 3 div dans un 4ème div container (cf image)
Je n'y arrive pas et dès que le texte (le lorem ipsum) arrive au niveau du div jaune tous les div s'empilent...

Que me conseillez-vous d'utiliser ?

Merci pour l'aide
PAul

Pièce jointe 367806
06/04/2018, 11h41
Invité

Bonjour,

1- il n'y a pas de "div jaune"... :koi:
(je suis dalmatien, pas daltonien... :aie: )

2- Merci de montrer les codes CSS et HTML
06/04/2018, 16h42
Mister Paul

Oops oui je voulais parler du div vert !
( il faut que je consulte :weird: )

Bon ceci dit pour envoyer du code il faut attendre parce que je retouche à celui de Virtuemart pour des listes de produits. Et je me suis rendu compte que le prix que je souhaite dans le bloc vert, accroché en haut à droite du conteneur, ne permet pas de renvoyer mon joli titre à la ligne si celui-ci est long et qu'on est avec une petite fenêtre...

Au fait quelle est la meilleure technique pour tout ce genre de div imbriqués et élastiques ?
C'est possible avec Flex ce que j'essaie de faire ?
06/04/2018, 16h48
Invité

On attend ton code.......

Alors voilà...
Le PHP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="row">
	<div class="product vm-products-horizon">
		<div class="spacer product-container">
			<div class="vm-product-media-container">
				<!-- IMAGE zone ROUGE-->
			</div>
			<div class="vm-product-descr-container-0">
				<h2><!-- TITRE zone BLEUE--></h2>
				<p class="product_s_desc"><!-- DESCRIPTION zone BLEUE--></p>
			</div>
			<div class="vm3pr-2">
        			<div class="product-price"><!-- INFO PRIX zone VERTE-->
          				<div class=""><!-- Autres div éventuels (si remise de prix, etc.)--></div>
        			</div>
        		<div class="clear"></div>
      		</div>
	</div>
  </div>
</div>

Le CSS de base dans Virtuemart :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.product {
  float: left;
  border: 0px solid #ddd;
  min-width: 220px;
}
 
.spacer {
  position: relative;
}
.vm-product-media-container {
  float: left;
  max-width: 180px;
}
.vm-product-descr-container-0 {
  float: left;
  min-height: 50px;
  margin-bottom: 6px;
}
.vm3pr-3 {
}
.vm-products-horizon .product-price {
  float: right;
}
.product-price {
  display: block;
  min-height: 56px;
  margin: 0 0 6px;
  text-align: right;
}
.clear {
   clear: both;
}

J'ai ajouté:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.row {
    overflow: hidden;
}
.vm-product-media-container {
  float: left;
  max-width: 180px;
}
.vm-product-descr-container-0 {
  position: absolute;
}
.vm-products-horizon .product-price {
  right:5px;
  top:10px;
  position:absolute;
}

Le souci c'est que quand le texte du div .vm-product-descr-container-0 (zone en bleu) atteint le .product-price (zone en vert) , il passe en dessous. J'aimerais qu'il aille automatiquement à la ligne...
:oops:

Bonjour,

il faut mettre le div "vm3pr-2" DANS le div "vm-product-descr-container-0" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="row">
  <div class="product vm-products-horizon">
    <div class="spacer product-container">
      <div class="vm-product-media-container">
        IMAGE zone ROUGE
      </div>
      <div class="vm-product-descr-container-0">
        <div class="vm3pr-2">
          <div class="product-price">INFO PRIX zone VERTE
            <div class="">Autres div éventuels (si remise de prix, etc.)</div>
          </div>
          <div class="clear"></div>
        </div>
        <h2>TITRE zone BLEUE</h2>
        <p class="product_s_desc">DESCRIPTION zone BLEUE</p>
      </div>
    </div>
  </div>
</div>

Code:

1
2
3
4
.product-container { display:flex; display:-webkit-flex; }
.vm-product-media-container { background:red; }
.vm-product-descr-container-0 { background:lightblue; }
.vm3pr-2 { float:right; background:lightgreen; width:30%; }

07/04/2018, 12h46
Mister Paul

Merci de prendre du temps pour mes petits soucis.
;)

J'ai bien modifié le code php comme tu l'indiques pour déplacer le div "vm3pr-2"
J'ai ajouté ton code css

Mais, sauf erreur de ma part, quelque chose ne va pas car .vm-product-descr-container-0 (bleu) prend 100% du div.spacer.product-container.

Donc le texte :
- commence complètement à gauche, au-dessus de .vm-product-media-container,
- et va complètement à droite => toujours pas de saut de ligne du texte quand il touche vm3pr-2 (dont je ne vois pas le background vert)
07/04/2018, 13h37
Invité

Je n'ai pas l'ensemble du code. On ne peut pas tester "in situ".
À toi d'adapter.

Supprime le CSS que TU as ajouté (float:left,... position:absolute,...)
07/04/2018, 18h02
Mister Paul

C'était bien ça !

J'ai dû ajuster en mettant un width: 100%; sur le .vm-product-descr-container-0
et un width:auto; sur le .vm3pr-2
Enfin des broutilles quoi...

Merci pour l'aide.
:ccool: