xHTML/CSS: Comment rendre intérieure div obtenir 100% de la largeur de moins d'un autre div de largeur
J'ai 2 divs imbriqués à l'intérieur extérieur, qui a width:100%. Les deux divs imbriqués doit être sur une seule ligne et premier doit obtenir la taille de son contenu:
<div id="#outer" style="width:100%; border:1px">
<div id="#inner1" style="border:1px; display:inline">
inner div 1. Some text...
</div>
<div id="#inner2" style="width:100%????; border:1px; display:inline">
inner div 2...
</div>
</div>
Question est comment faire #inner2 div pour le repos de l'espace horizontal si la largeur de la #inner1 div n'est pas spécifié et dépend de ce qu'il est à l'intérieur?
P. S. Tous les styles sont dans des classes séparées, dans mon cas, ici, j'ai mis le CSS dans les attributs de style juste pour la simplification.
Je veux la suite de travailler dans IE7+ et FF 3.6
Dans plus de détails pour moi, il ressemble à ceci:
<style type="text/css">
.captionText
{
float:left;
}
.captionLine
{
height: 1px;
background-color:black;
margin: 0px;
margin-left: 5px;
margin-top: 5px;
border: 0px;
padding: 0px;
padding-top: 1px;
}
</style>
<table style="width:300px;">
<caption width="100%">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
Ici est à l'image de ce que je veux:
- Je sais que je peux le faire avec des tables, mais je veux le faire avec les divs
- Il ne serait probablement pas être évident avec les tables de bien. Je n'ai jamais très bien compris les règles, les navigateurs utilisent pour calculer non définis au tableau des largeurs de colonne.
Vous devez vous connecter pour publier un commentaire.
Le mystérieux
overflow: hidden;
est votre ami ici. Il s'arrête éléments adjacents à la flotte de l'extension derrière le float — je pense que c'est la mise en page que vous cherchez.Voici quelques légèrement modifié HTML: je ne pense pas que vous pouvez avoir
#
caractères dans votreid
s:Et voici le CSS pour réaliser la mise en page que vous voulez.
(Je l'ai mis dans supplémentaires CSS pour IE 6 avec HTML les commentaires conditionnels. Je viens de remarquer que vous n'avez pas vraiment besoin de travailler dans IE 6, mais si vous avez envie d'être gentil envers IE 6 utilisateurs là-bas...)
Testé et de travail dans IE 6, 7, et 8, Firefox 3.5 et Chrome 4.
overflow
a cet effet sur les flotteurs. Il y avait un Débordement de Pile question l'autre jour: voir stackoverflow.com/questions/9193214/...Si vous lisez ceci maintenant, vous pouvez probablement utiliser
calc
, alors soyez reconnaissants.HTML
CSS
Voir le exemple de travail sur JSFiddle.
Vous auriez besoin pour faire flotter le inner1 div à gauche, comme ceci:
Cela devrait faire l'affaire. Check it out!
bye
Vous n'avez pas besoin d'utiliser un div pour élément imbriqué, il suffit d'utiliser SPAN comme ce
display:inline-block;
est pris en charge uniquement sur les éléments qui sontdisplay:inline;
par défaut — par exemple, est pris en charge sur<span>
et<a>
, mais n'est pas pris en charge sur<div>
ou<li>
.Expansion sur @Nasser Hajloo réponse, cela fonctionne pour moi (même dans IE6)
Essayer avec la div principale plus petit que 400px pour voir comment il s'adapte. (Marche aussi avec les divisions plutôt que enjambe la clé est la largeur: auto dans la première div/span.)
Essayez ceci: nid
inner1
à l'intérieur deinner2
, et de supprimer ledisplay:inline
deinner2
, comme ceci:Vous pouvez le constater ici: http://jsbin.com/adiwi
À partir de votre code, il semble que vous essayez d'obtenir une ligne horizontale pour remplir l'espace vide dans votre div. Si je suis correct de votre recherche afin de créer un effet visuel avec le balisage. Corrigez-moi si je me trompe.
(Serait agréable de voir une image de ce que vous voulez)
Exemple:
Ce n'est pas le plus pratique. Vous devriez essayer d'obtenir cet effet avec les CSS.
Essayez de rendre votre code plus sémantique d'abord:
Pour obtenir la ligne:
voulez
la ligne pour être en px
background
propriété
.
Votre premier problème, c'est que vous êtes de préfixer vos identifiants avec un '#'. Le # est utilisé uniquement en CSS pour faire référence à l'élément avec l'id, par exemple, la règle CSS #outer{width:100%} se réfère à votre élément:
Aussi, vous n'avez pas besoin d'utiliser la largeur sur les div (ou de toute autre éléments de bloc) qui ne sont pas flottait, comme ils l'ont déjà automatiquement jusqu'à 100% de la largeur disponible.
Si vous voulez les 2 DIVs apparaître sur la même ligne que vous avez à faire flotter le premier à gauche. De la côté DIV apparaîtra alors sur le côté, encore une fois, vous n'avez pas besoin de sepecify widthd pour le deuxième élément. Ici est votre exemple complet, y compris une autre couleur de bordure pour chaque div.
J'ai fait les frontières plus grand de sorte que vous pouvez voir plus clair ce qui se passe.
Une autre solution consiste à exécuter un script javascript qui permet de redimensionner le captionLine classe quand le document est chargé comme ça.
A fallu un certain temps pour qu'il fonctionne sous IE8, n'ont pas essayé IE7, mais devrait fonctionner.
2 choses à noter.
Réponse est très simple! Si vous avez fixe div (menu) sur le côté gauche, puis fixes div float: left et votre droit souple div margin-left qui est plus grande que la largeur de la première, fixe div.