28160 sujets

CSS et mise en forme, CSS3

Bonjour,
Je commence à utiliser knacss v7 pour un template et je cherche à faire sorte qu'une grille de 4 colonnes s’étale sur toute la largeur... Par très clair.

<section class="grid-1 center">
	<div id="gamme" class="grid-4 has-gutter border-top border-bottom">

		<div class="center border-right border-bottom"> <!-- div que j'aimerais voir s'étaler sur tout la largeur de l'écran diviser par le nombre définit dans le grid, ici 4 -->
			<div class="padding-bottom-10"><a href="http://#12/stadium" title="Stadium" alt="Stadium"><img class="art_thumbnail" src="http://#/stadium/stadium_main.jpg" alt="Stadium" title="Stadium"></a></div>
			<div><h2 class="txtcenter h4-like uppercase">Stadium</h2></div>
		</div>

		<div class="center border-right border-bottom"><!-- div que j'aimerais voir s'étaler sur tout la largeur de l'écran diviser par le nombre définit dans le grid, ici 4 -->
			<div class="padding-bottom-10"><a href="http://#11/hyperlite" title="Hyperlite" alt="Hyperlite"><img class="art_thumbnail" src="http://#/hyperlite/hyperlite_main.jpg" alt="Hyperlite" title="Hyperlite"></a></div>
			<div><h2 class="txtcenter h4-like uppercase">Hyperlite</h2></div>
		</div>

		<div class="center border-right border-bottom"><!-- div que j'aimerais voir s'étaler sur tout la largeur de l'écran diviser par le nombre définit dans le grid, ici 4 -->
			<div class="padding-bottom-10"><a href="http://#10/safey-cage" title="Safety cage" alt="Safety cage"><img class="art_thumbnail" src="http://#/safetycage/fixed-cage_main.gif" alt="Safety cage" title="Safety cage"></a></div>
			<div><h2 class="txtcenter h4-like uppercase">Safety cage</h2></div>
		</div>

		<div class="center border-right border-bottom"><!-- div que j'aimerais voir s'étaler sur tout la largeur de l'écran diviser par le nombre définit dans le grid, ici 4 -->
			<div class="padding-bottom-10"><a href="http://#9/velocity" title="Velocity" alt="Velocity"><img class="art_thumbnail" src="http://#/velocity/velocity_main.jpg" alt="Velocity" title="Velocity"></a></div>
			<div><h2 class="txtcenter h4-like uppercase">Velocity</h2></div>
		</div>
	</div>
</section>


Sur un écran large les div enfants ne prenne par toute la largeur du coups je me retrouve avec des bordures qui ne sont "jointes". Comment faire pour que chaque div enfants occupe tout l'espace disponible et non ce limite à la taille de son contenu ?

upload/1571759299-57230-2019-10-2217-44.jpg

Merci d'avance.
Philippe.
Administrateur
Hello,

A priori le problème ne vient pas de KNACSS directement mais de l'ajout de tes classes "center" partout car elles empêchent les div internes de s'étaler.
J'ai fait un test rapide en les supprimant et cela fonctionne chez moi.

Bonne journée

Raphaël
Pafait, c'est bien à cause des center.

J'ai tout viré mais l'image n'est plus centrer dans le div du coups Smiley decu

Philippe
Administrateur
flipflip a écrit :
Merci pour le lien, j'en connaissais la théorie mais j'essaie de faire fonctionner ce qui est présent dans la doc de knacss qui donne en exemple

La classe .center centre l'élément lui-même. Il ne faut pas l'utiliser sur les éléments qui doivent s'élargir.
Par contre tu peux l'utiliser sur les enfants de ces éléments pour les centrer à l'intérieur des parents qui - eux - prennent 1/4 de la place restante.