Comment remplir 100% de la largeur restante
Est-il du travail pour faire quelque chose comme cette œuvre comme prévu?
Je souhaite qu'il y ait quelque chose comme ça width:remainder;
ou width:100% - 32px;
.
width: auto;
ne fonctionne pas.
Je pense que le seul moyen c'est de travailler autour avec des remplissages/marges, les valeurs négatives, ou float, ou de certaines balises html hack. J'ai essayé aussi display:block;.
Je voudrais obtenir le même résultat, sans tables http://jsfiddle.net/LJGWY/
<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
<div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
<div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>
Faire flotter le bleu div vers la droite et les verts vont naturellement s'étendre à remplir l'espace restant.
OriginalL'auteur Vitim.us | 2011-11-24
Vous devez vous connecter pour publier un commentaire.
Des éléments de niveau bloc <div> remplir 100% de la largeur disponible automatiquement. Si vous flottez l'un d'eux à droite, l'autre va remplir l'espace restant.
http://jsfiddle.net/5AtsF/
OMG si simple, j'ai essayé cela, mais ne fonctionne pas, parce que j'ai mis un div en face. jsfiddle.net/5AtsF/1 Pourquoi?
La raison pour laquelle cela ne fonctionne pas si vous placez le div flottant deuxième est parce que le premier div remplit toute la largeur, en forçant le deuxième div à la ligne suivante. Jetez un oeil à css-tricks.com/2841-the-css-box-model pour plus d'informations.
Cela ne fonctionne pas avec les éléments div, même si vous définissez
display:block;
Est-ce juste moi, ou n'est-ce pas en fait le travail? En coulisse, il prend toute la largeur, plutôt que de la largeur restante.
OriginalL'auteur Brandon Gano
Pour ceux qui cherchent plus de cela maintenant theres une newish propriété css méthode appelée calc, qui peuvent effectuer ce dans un cadre beaucoup plus souple de la mode.
Comme un mot d'avertissement, ce n'est pas très portable et de soutien est ropey sur les appareils mobiles. IOS 6+ et andriod 4.4 je crois. Le soutien est nettement mieux pour le bureau, cependant, IE 9.0+.
http://caniuse.com/calc
J'ai utilisé un JS hack dans le passé pour réaliser cette technique, si quelqu'un est incroyablement coincé, une mise en page différente est plus conseillé si, comme redimensionner est plus lent.
OriginalL'auteur nepeo
Cela devrait faire pour vous:
Voir le jsFiddle
C'est en supposant que vous allez supprimer la 3px frontières du résultat final (ils se chevauchent dans l'exemple parce que la largeur de la bordure n'est pas inclus dans la largeur).
OriginalL'auteur animuson
Vous pouvez réaliser cela sans changer votre balisage avec l'utilisation
display:table
propriété:Vérifiez l'exemple vivant avec aucun
horizontal scrollbar
http://jsfiddle.net/WVDNe/5/
Un autre exemple, mais dans la meilleure façon de vérifier cela:
http://jsfiddle.net/WVDNe/6/
remarque: cela ne fonctionne pas dans IE7 & ci-dessous
Vérifier cela aussi
http://jsfiddle.net/LJGWY/4/
C'est le travail en tous les navigateurs.
OriginalL'auteur sandeep
Si vous ne savez pas quelle sera la part fixe, vous pouvez utiliser le flex 9999 hack.
OriginalL'auteur fabianfiorotto
Essayer le réglage de la position de la sorte:
OriginalL'auteur Raybiez
Vous pourriez mettre le
fixed div
à l'intérieur de lafill div
.CSS
Exemple: http://jsfiddle.net/EM8gj/3/
flaot: left
.ne fonctionne que sur un div vide, si je tiens à mettre une entrée à l'intérieur, le problème est toujours le même. jsfiddle.net/EM8gj/2
Merci @animuson. Vous avez raison. C'était un reste de bits de code de me tripoter. Édité maintenant.
OriginalL'auteur Jason Gennaro
vous pouvez utiliser le style de tableau.
créer un div avec un style de tableau et sous-éléments-être que c'est la table des styles de cellule
label texte
OriginalL'auteur adramazany