left div
left div
left div
left div
left div
right div
right div
right div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
bit taller
Comment puis-je faire un div remplir la largeur restante?
par exemple
Comment puis-je obtenir div2 pour remplir le rest?
Essayez quelque chose comme ceci:
left div right div middle div
bit taller
Les divs occuperont naturellement 100% de la largeur de leur conteneur, il n’est pas nécessaire de définir explicitement cette largeur. En ajoutant une marge gauche / droite identique aux deux divs latéraux, son propre contenu est forcé de s’asseoir entre eux.
Notez que la “div du milieu” va après le “div droit” dans le HTML
Cette solution est encore plus simple que celle fournie par Leigh
. C’est en fait basé sur cela.
Ici, vous pouvez remarquer que l’élément intermédiaire (dans notre cas, avec la classe "content__middle"
) n’a pas de propriété dimensionnelle spécifiée – pas de largeur, ni de remplissage, ni de propriété liée à la marge – mais seulement un overflow: auto;
(voir note 1).
Le grand avantage est que maintenant vous pouvez spécifier une max-width
et une min-width
à vos éléments gauche et droit . Ce qui est fantastique pour les dispositions fluides .. donc mise en page sensible 🙂
note 1: contre la réponse de Leigh où vous devez append les propriétés margin-left
et margin-right
à la classe "content__middle"
.
Ici, les éléments gauche et droit (avec les classes "content__left"
et "content__right"
) ont une largeur fixe (en pixels): donc appelée mise en page non fluide.
Démo en direct sur http://jsbin.com/qukocefudusu/1/edit?html,css,output
left div
left div
left div
left div
left div
left div
right div
right div
right div
right div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
bit taller
Ici, les éléments gauche et droit (avec les classes "content__left"
et "content__right"
) ont une largeur variable (en pourcentages) mais aussi une largeur minimale et maximale: donc appelée layout fluide.
Live Demo dans une mise en page fluide avec les propriétés max-width
http://jsbin.com/runahoremuwu/1/edit?html,css,output
max-width of 170px & min-width of 40px
left div
left div
left div
left div
left div
left div
max-width of 250px & min-width of 80px
right div
right div
right div
right div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
bit taller
Testé sur BrowserStack.com sur les navigateurs Web suivants:
Les boîtes flexibles sont la solution – et elles sont fantastiques. Je veux quelque chose comme ça depuis une décennie. Tout ce dont vous avez besoin est d’append de l’ display: flex
à votre style pour “Main” et flex-grow: 100
(où 100 est arbitraire – ce n’est pas important qu’il soit exactement 100). Essayez d’append ce style (couleurs ajoutées pour rendre l’effet visible):
Plus d’infos sur les boîtes flex ici: https://css-sortingcks.com/snippets/css/a-guide-to-flexbox/
.main { display: flex; } .col-1, .col-3 { width: 100px; } .col-2 { flex-grow: 1; }
Left column Middle column Right column
Bien qu’un bit
tard dans la publication d’une réponse, voici une approche alternative sans utiliser de marge.
div 1 div 3 div 2
bit taller
Cette méthode fonctionne comme la magie, mais voici une explication:) \
Violon avec un échantillon similaire ici.
La Div qui doit prendre l’espace restant doit être une classe. Les autres divs peuvent être des identifiants mais ils doivent avoir une largeur.
CSS :
#main_center { width:1000px; height:100px; padding:0px 0px; margin:0px auto; display:block; } #left { width:200px; height:100px; padding:0px 0px; margin:0px auto; background:#c6f5c6; float:left; } .right { height:100px; padding:0px 0px; margin:0px auto; overflow:hidden; background:#000fff; } .clear { clear:both; }
HTML :
Le code suivant a le code en action, ce qui devrait résoudre le problème de couverture de zone restant.
Je cherchais une solution au problème opposé où j’avais besoin d’un div de largeur fixe au centre et d’un div de largeur de fluide de chaque côté.
HTML:
This is fixed width in the centre This is fluid width on the left This is fluid width on the right
CSS:
#wrapper { clear: both; width: 100%; } #wrapper div { display: inline-block; height: 500px; } #center { background-color: green; margin: 0 auto; overflow: auto; width: 500px; } #left { float: left; } #right { float: right; } .fluid { background-color: yellow; width: calc(50% - 250px); }
Si vous modifiez la largeur de l’élément #center
, vous devez mettre à jour la propriété width de .fluid
pour:
width: calc(50% - [half of center width]px);