27926 sujets

CSS et mise en forme, CSS3

Bonjour,
Comme indiqué dans le titre ci-dessus, j'aimerai faire en sorte que mes divs soit en ligne dans une div et que, a la fin de celle-ci, elles sautent une ligne pour continuer un cycle, (dans l'objectif de pouvoir effectuer une rechercher dans une base de donnée c'est-a-dire ne pas avoir a faire une nouvelle div tous les trois.)
Voici mon code :
<div class="list">
			<div class="o-list">
				<img class="o-list" src="/img/game-lib/247646353.jpg" width="310px" height="175px">
				<h1 class="o-list">Super Mario World</h1>
				<p class="o-list">Super Mario World (???????????, S?p? Mario W?rudo?), sous-titré Super Mario Bros. 4 au Japon4, est un jeu vidéo de plates-formes développé et édité par Nintendo sur Super Nintendo. Le développement a été assuré par la division Nintendo EAD, dirigée par Shigeru Miyamoto ; ce dernier a réalisé le jeu aux côtés de Takashi Tezuka.</p>
			</div>
			<div class="o-list">
				<img class="o-list" src="/img/game-lib/563435458.jpg" width="310px" height="175px">
				<h1 class="o-list">Fortnite</h1>
				<p class="o-list">Fortnite est un jeu en ligne développé par Epic Games sous la forme de différents modes de jeu qui partagent le même gameplay général et le même moteur de jeu. Les modes de jeu comprennent : Fortnite : Sauver le monde, un jeu coopératif de tir et de survie conçu pour quatre joueurs au maximum et dont le but est de combattre des zombies et de défendre des objets à l'aide de fortifications, et Fortnite Battle Royale, un jeu de battle royale en free-to-play où jusqu'à 100 joueurs se battent entre eux jusqu'au dernier survivant.</p>
			</div>
			<div class="o-list">
				<img class="o-list" src="/img/game-lib/458678655.jpg" width="300px" height="175px">
				<h1 class="o-list">Minecraft</h1>
				<p class="o-list">Minecraft est un jeu vidéo de type aventure « bac à sable » (construction complètement libre) développé par le Suédois Markus Persson, alias Notch, puis par la société Mojang Studios. Il s'agit d'un univers composé de voxels et généré de façon procédurale, qui intègre un système d'artisanat axé sur l'exploitation puis la transformation de ressources naturelles (minéralogiques, fossiles, animales et végétales).</p>
			</div>
			<div class="o-list">
				<img class="o-list" src="/img/game-lib/876453687.jpg" width="300px" height="175px">
				<h1 class="o-list">EL LAC</h1>
				<p class="o-list">C'est EL LAC le bye, Le lac El Peñol est situé à 40 km à l'est de la ville de Medellín, chef-lieu du département, sur le cours du río Nare. Il est bordé par les municipalités de El Peñol, Guatapé et Alejandría.

Avec un volume de 1 235 millions de m31, c'est la troisième plus importante retenue d'eau du pays derrière le lac de Betania et le lac de Urrá. </p>
			</div><!--  -->
		</div>

div.list{
	width: 1000px;
	max-width: 1000px;
	margin-right: 0;
	display: flex;
}

div.o-list{
	margin: 3px;
	/*background-color: red;*/
	width: 310px;
	padding: 6.75px;
	border-radius: 15px;
	height: 360px;
}
Modérateur
Salut,

Je partyirai plutot sur un truc comme ça :
div.list {
  text-align: center;
}

div.o-list {
  margin: 3px;
  /*background-color: red;*/
  width: 310px;
  padding: 6.75px;
  border-radius: 15px;
  /* height: 360px; */
  
  display: inline-block;
  vertical-align: top;
}

https://jsfiddle.net/hj1ur4av/

Donc sans le flex vu que tes bloc ont une taille fixe, sans hauteur max non plus pour les bloc sinon ca se chevauche
Meilleure solution
Modérateur
BurgerKingKong a écrit :
Y aurait il moyen de faire en sorte que la 4 "case" passe au debut de ligne ?

j'ai pas compris