Comment créer un conteneur HTML qui remplira tout largeur disponible entre les deux éléments flottants?
Voici un schéma de ce que je veux pour le rendu, et aussi simple qu'il semble que je ne peux pas trouver un moyen de code le conteneur entre les deux éléments flottants...:
---------- ----------
| | Some text text text text text text text text | |
| | text (in a <p> element). | |
| float: | ------------------------------------------ | float: |
| left; | | The container I want to create | | right; |
| | ------------------------------------------ | |
| | Some other text text text text text text tex | |
---------- text text text text text text text text text | |
text text text (in another <p> element). | |
----------
La largeur de chacun des deux éléments flottants est inconnu et peut varier, donc je code le conteneur de manière indépendante de ceux-ci (ainsi que je ne peux pas changer leur code). Et je veux avoir ses bordures gauche et droite le long de la frontière des éléments flottants.
Par exemple, si j'utilise un élément div (avec display:block) à sa gauche et à droite de la bordure sont sous les deux éléments flottants... Si j'utilise un élément de tableau (ou un div avec display:table) il ne remplit pas toute largeur disponible si il n'y a pas de texte intégral ligne...
Je parie qu'il y est une solution simple, mais je ne peux pas le trouver! Merci pour toute aide!
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser une marge de sortir de la flotte qu'ils ne sont pas dans le contexte de l'élément conteneur. Il peut travailler avec un fluide ou à largeur fixe:
inline-block
et passez le tout au flotteur marge chose.En fonction de la réponse par @durilai (je crois que cela résout le problème avec plus de précision, mais cela dépend de ce que vous voulez vraiment faire):
Ce sera, contrairement à @durilais solution, de se comporter comme avec la normale de flotteurs lorsque le texte est "plus haut" que les flotteurs. Il aura encore besoin de vous pour connaître la largeur de la flotte, et il ne fonctionnera pas correctement une fois le plus intime
<div>
est au-dessous de l'un des deux flotteurs, mais c'est aussi proche d'une solution que vous pouvez obtenir.Il n'est pas possible. Voici pourquoi:
La la largeur de la propriété peut prendre l'une de ces valeurs:
inherit
(=100%
)auto
(=100%-(margins+borders+paddings)
)Aucune de ces fonctionnera avec votre préalables:
Je l'ai eu! Ok c'est une sorte de hack et il utilise une table, mais il fonctionne sur tout navigateur (même IE6), et je peux gérer pour le nettoyer un peu maintenant, je l'ai travail...
La clé est de créer une table avec au moins deux cellules, et de définir la largeur de l'un d'eux à 100%; de cette manière, le navigateur affichera cette cellule aussi grand que possible afin d'obtenir sa véritable affiche de taille de près de 100% de l'ensemble du tableau que possible. Et maintenant, je peux mettre ce que je veux dans cette cellule.
Voici le code HTML correspondant:
De cette façon, le conteneur s'affichent correctement, quelle que soit la taille de tout ce qui est dans les deux div flottante. Et si la 1px de large cellule vide sur la droite un problème, je peux toujours mettre un autre sur la gauche pour obtenir symétrique et moins visuellement gênant (mais comme une question de fait, avec un 0-frontière-l'espacement sur la table et un 0-rembourrage sur chaque cellule, la 1px de large cellule vide est en fait pas visible...).
Maintenant je dois trouver un moyen, si possible, pour obtenir tout cela un peu plus propre (et peut-être même sans l'aide d'un élément de tableau?).
style="width: 100%"
attribut doit être dans votretable
tag, laissant le seultd
sans spécifiéewidth
étendre automatiquement. Aussi, vous n'avez pas besoin de la deuxièmetd
, vous pouvez simplement ajouterpadding-right: 1px
pour la premièretd
.