Discussion :

[selmagsi]

Bonjour,
Je voudrais faire habillage de texte autour d'une image, en utilisant html et css.
J'arrive à le faire dans une quelconque partir de ma page, comme suit:

Code html :

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

<div style="float:left;"><img src="images/zozor_classe.png" alt="" /></div><div>Mon texte qui est evidement long</div>

Mais malheureusement j'ai besoin de faire l'habillage dans une flexbox (qui dans mon cas une grille 2x2), mon code html:

Code html :

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

1
2
3
4
5
6
<div class="grid2x2">
  <div class="box box1"> <div> <div style="float:left;"><img src="images/zozor_classe.png" alt="" /></div> Texte1 long  </div> </div>
  <div class="box box2"><div>TEXTE2</div></div>
  <div class="box box3"><div>TEXTE3</div></div>
  <div class="box box4"><div>TEXTE4</div></div>
</div>

Code CSS :

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

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
.grid2x2 {
  min-height: 100%;
  display: flex;
  /*flex-wrap: wrap;*/
  flex-flow: row wrap;
  flex-direction: row;
  background-color: rgba(190, 158, 75, 0.05);
 
 
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 0px);  
  justify-content: center;
  flex-direction: column;
 text-align: justify;
 
 
 
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
  border-style: solid;
   padding: 25px;
 
}
 
.box { margin: auto; 
}

pour le moment j'essaye de faire l'habillage que dans box 1.


Je vous laisse une image pour voir le résultat à l’extérieur de felxbox et à l’intérieur. (1 ce que je veux, 2 ce que j’obtiens à l’intérieur de flexbox 😢 )



merci d'avance.

Si vous avez des pistes, svp orientez moi.
Bonne journée.

[NoSmoking]

Bonjour,
on a toujours tendance à faire compliqué, et c'est ton cas la structure peut être allégé :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="grid2x2">
  <div class="box">
    <img src="images/zozor_classe.png" alt="" />
    <p>Lorem ipsum dolor sit amet, ...</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, ...</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, ...</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, ...</p>
  </div>
</div>

le CSS en devient plus simple à appliquer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.grid2x2 {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  background-color: rgba(190, 158, 75, 0.05);
}
.grid2x2 img {
  float: left;
}
.grid2x2 .box {
  flex-basis: calc(50% - 1em);
  box-sizing: border-box;
  margin: .5em;
  padding: .5em;
  border: 1px solid #888;
  text-align: justify;
}

par exemple !

[selmagsi]

Merci pour la simplicité de ton code, et son efficacité par rapport à la relativité des tailles (des case d'une même ligne). Malheureusement, l'habillage n'est toujours pas fait, même si j’insère ma photo comme suit:

Code html :

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

<img src="images/zozor_classe.png" alt="" style=float:left"; width="100" height="100"/>

aurais tu une autre piste?
Merci d'avance

[ProgElecT]

Salut
<img src="images/zozor_classe.png" alt="" style=float:left"; width="100" height="100"/>
<img src="images/zozor_classe.png" alt="" style="float:left"; width="100" height="100"/>