Organisation auto des div - HTML CSS
Résolu
electroking
Messages postés
236
Date d'inscription
Statut
Membre
Dernière intervention
-
electroking Messages postés 236 Date d'inscription Statut Membre Dernière intervention -
electroking Messages postés 236 Date d'inscription Statut Membre Dernière intervention -
Salut à tous, voila mon problème : sur un site web que je fais, j'ai une div, qui occupe toute la largeur (ici en noir) et à l'intérieur j'ai plusieurs div (ici en orange) avec une hauteur et une largeur fixe. Et je voudrais que ces div s'organisent de façon à prendre toute la place disponnible même quand le fenêtre change de taille (image ci-dessous) :
mais quand je place mes div, elle se placent les unes en dessous des autres.
J'ai cherché mais je n'ai trouvé que la propriété css white space (un truc comme sa) qui ne marche pas...
Une idée ?
merci d'avance pour votre réponse
mais quand je place mes div, elle se placent les unes en dessous des autres.
J'ai cherché mais je n'ai trouvé que la propriété css white space (un truc comme sa) qui ne marche pas...
Une idée ?
merci d'avance pour votre réponse
A voir également:
- Html css div
- Editeur html - Télécharger - HTML
- Div c++ - Télécharger - Langages
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- Html download - Télécharger - HTML
3 réponses
Salut,
Pour que leur taille change selon la place disponible, c'est effectivement les pourcentages (ou vw/vh) qu'il faut utiliser.
Pour ce qui est du placement, regarde du côté du float: left.
Exemple:
Pour que leur taille change selon la place disponible, c'est effectivement les pourcentages (ou vw/vh) qu'il faut utiliser.
Pour ce qui est du placement, regarde du côté du float: left.
Exemple:
<div id="black">
<div class="orange fleft">Hello!</div>
<div class="orange fleft">Hello!</div>
<div class="orange fleft">Hello!</div>
</div>
.black {
width: 100%;
border: 1px solid black;
}
.orange {
margin: 1.5%;
width: 30.3%;
background-color: orange;
}
.fleft {float: left;}
