Agencement de DIV type rowspan

Bonjour à tous,

Je fais là mon premier post pour solliciter votre aide sur un épineux problème pour moi.
Autant, je ne pense pas avoir des moufles autant pour que qui est l'agencement des DIVs j'ai vraiment l'impression de patauger.

Excusez-moi par avance si ce type de question à déjà était posée. Je sachant pas vraiment comment formuler cela, j'ai eu toutes les peines du monde à trouver des réponses.

Voilà la question, le sujet :
Je dois "bidouiller" un progiciel que l'on utilise au sein de mon hôpital. (enfin "l'adapter aux plus proches des besoins utilisateurs")

J'ai 3 div successives, je ne peux en modifier que le style et je souhaite obtenir cela :



Comment puis-je faire ?

Merci d'avance,

Cédric
Modifié par cedric_nhn (17 Dec 2021 - 11:24)

Peut être un truc dans ce genre :

<div class="A">
	<div class="B">
	</div>
	
	<div class="B">
		<div class="B">
		</div>
		
		<div class="B">
		</div>
	</div>
</div>

.A { display: table; }
.B { display: table-cell; width: 50vw; }

Salut,

j'aurai bien dit avec du display:grid , mais j'ai vu ça de très loin seulement donc sans grande conviction que cela soit bien comme ça que cela fonctionne
Du coup j'obtiens un css de ce genre la en prenant 3 div en suivant avec un id chacun :

body{
  display:grid;
  grid-gap: 10px;
}
#div1{
 background: red; 
 grid-column: 1;
 grid-row: 1;
}

#div2{
  background: yellow;
  grid-column: 1;
  grid-row: 2;
}

#div3{
  background: green;
  grid-column: 2;
  grid-row: 1 / 3 ;
}

Et l'exemple qui va avec : https://jsfiddle.net/1bqjy78w/
Cela permet de modifier facilement le nombre de ligne de chaque div pour voir comment cela se comporte en fonction des tailles de chacun. On peut également modifier l'attribution des ids de chaque div pour déplacer la position des textes dans l'écran (vu que tu n'as rien préciser on ne sait pas quelle est la div qui est à droite donc j'ai mis la 3e , mais si on inverse l'id div3 avec un des 2 autres ça déplace cet id à droite)

Ola,

Le seconde proposition fonctionne bien, c'est smart, si l'on accède au div parent pour y affecter "display:grid; grid-gap: 10px;". Mais je n'y ai pas accès.

Peux importe l'ordre des divs, ça je peux le modifier.

Concernant la première proposition, je ne suis pas parvenu à l'exploiter.
https://jsfiddle.net/zm5v8gk9/

Cédric

Voici les styles de la div parente :
display: flex;
flex-direction: row;
flex-wrap: wrap;

Et je n'ai pas la main pour les modifier...
Modifié par cedric_nhn (17 Dec 2021 - 15:52)

Comment ça se fait que tu n'as pas la main pour les modifier ? :'(

Je ne suis pas expert en css, mais pour moi avec du flex en direction row, on ne pourra pas faire ce que tu voudras

Bonjour,

On est obligé de combiner un peu.

Dans le html, elles sont dans quel ordre, les boites ? EDIT: je viens de voir qu'on peut modifier l'ordre des boites, donc on oublie la question.

Ont-elles des dimensions connues ou pas, et si oui, lesquelles ?

Le parent a-t-il des dimensions connues ou pas, et si oui, lesquelles ?

EDIT: est-ce que par hasard, la boite parente aurait un position:relative ou un truc similaire ?

Amicalement,
Modifié par parsimonhi (18 Dec 2021 - 00:02)

cedric_nhn a écrit :
Le seconde proposition fonctionne bien, c'est smart, si l'on accède au div parent pour y affecter "display:grid; grid-gap: 10px;". Mais je n'y ai pas accès.

Bonjour en passant d'un IDE de CHU...
La solution grid reste une très bonne solution, vous pouvez tenter de cibler l'élément parent via une classe quelque part plus haut, ou même voisine de l'élément parent (à partir du moment où elle le précède), sans toutefois devoir remonter tout l'arbre html.
Modifié par Olivier C (18 Dec 2021 - 13:46)