114 votes

Faciliter div largeur maxi lorsque float : left a la valeur

J'ai quelque chose comme ça:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

les deux flotteurs sont necessaires. Je veux que le contenu de la div pour remplir tout l'écran moins ceux 100px pour le menu. Si je n'utilise pas de flotteur de la div se développe exactement comme il se doit. Mais comment puis-je régler ce lorsque le flotteur est fixé? Si j'utilise qqch comme

style=width:100%

ensuite, le contenu de la div obtient la taille de la mère, qui est le corps ou une autre div qui j'ai aussi essayé, et donc, bien sûr, il ne s'adapte pas à droite du menu, et est ensuite illustré ci-dessous.

137voto

merkuro Points 4077

Espoir, j’ai bien compris vous, jetez un oeil à ceci : http://jsfiddle.net/EAEKc/

97voto

alanaktion Points 602

La plupart de la croix-compatible moyen que j'ai trouvé de le faire n'est pas très évident. Vous devez retirer le flotteur de la deuxième colonne, et s'appliquent overflow:hidden . Bien que cela semble se cacher tout contenu qui va à l'extérieur de la div, il en fait des forces de la div pour rester dans son parent.

À l'aide de votre code, c'est un exemple de la façon dont il pourrait être fait:

<div style="width:100px;float:left;">menu</div>
<div style="overflow:hidden">content</div>

Espérons que cela est utile à toute personne ayant ce problème, c'est ce que j'ai trouvé qui fonctionne le mieux pour le site, j'étais en bâtiment, après avoir essayé d'obtenir à s'adapter à d'autres résolutions. Malheureusement, ce n'est pas de travailler si vous incluez un droit flottait div d'après le contenu ainsi, si quelqu'un connait un bon moyen pour obtenir que cela fonctionne, avec une bonne IE de compatibilité, je serais très heureux de l'entendre.

30voto

Wilt Points 867
<h2>Solution sans fixation taille sur votre marge<pre><code></code></pre><p>+1 pour Merkuro, mais si la taille du flotteur change votre marge fixe échouera. Si vous utilisez au-dessus de CSS sur la div droite il changera joliment taille avec modification de taille sur le flotteur gauche. C’est un peu plus souple comme ça. Vérifier le violon ici : <a href="http://jsfiddle.net/wilt/9ZHBK/2/" rel="nofollow">http://jsfiddle.net/wilt/9ZHBK/2/</a></p></h2>

6voto

CleverCoder Points 572

Les éléments qui sont flotté sont sortis de l'écoulement normal de mise en page et les éléments de bloc, tels que DIV, pas plus longue que la largeur de son parent. Les règles de changement dans cette situation. Plutôt que de réinventer la roue, découvrez ce site pour quelques solutions possibles pour créer la disposition en deux colonnes, vous êtes après: http://www.maxdesign.com.au/presentation/page_layouts/

Plus précisément, le "Liquide disposition en Deux Colonnes".

Cheers!

3voto

kubilayeksioglu Points 117

Et basé sur `` de solution, si vous souhaitez maximiser l’un sur la gauche, vous devez utiliser :

A pas été testé sur IE, alors il peut ressembler cassé sur IE.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X