J'essaie de créer un site dynamique où j'ai trois boîtes flottantes à côté de l'autre. Ils sont 33,33% de largeur chacune. Le conteneur div autour d'eux est de 75% de largeur.
J'ai trouvé un article sur le problème ici: CSS: colonnes de saut
J'ai également trouvé un exemple de même problème ici: Exemple de colonnes de saut de saut
Faites glisser la taille de la fenêtre pour voir le saut IE7 ou plus tôt.
Quelqu'un sait s'il est possible de contourner cela? (sans JavaScript)
4 Réponses :
Dans une situation comme celle-ci, j'aurais tendance à contourner le problème à l'aide d'une feuille de style IE-Seule qui résout les valeurs jusqu'à ce qu'elles fonctionnent. Dans ce cas, il suffit de définir les largeurs à 33%, il ne sera pas parfait, mais ce n'est alors que la nature du Web.
Merci rory. Je sais que cela pourrait être résolu de cette façon et je pourrais être obligé de le faire au cas où Noneone d'autre ait une meilleure idée. C'est une sorte de manière laid de la moche de le résoudre.
C'est aussi une nécessité dans de nombreux cas malheureusement. La façon la plus laide / pirate de s'y rendre serait des commentaires conditionnels.
"C'est une sorte de manière laidée de le résoudre" Oui et non, d'accord, vous pouvez appeler cela un hack, mais je serais très surpris si quelqu'un peut proposer quelque chose de Néater, la plupart des hacks IE6 sont bien pires!
Cela ne me dérange pas du hack. 33.33% donne le saut à IE et si je change que, par exemple, 33% pour empêcher le saut, les largeurs sont trop petites à certaines tailles. 33% est un nombre incorrect, puis les largeurs se passent mal. C'est ce qui me dérangeait.
J'utilise deux solutions différentes selon la situation. Tout d'abord, essayez l'approche Nicole Sullivan (en utilisant http://www.stubbornella.org/content/2009/07/23/overflow-a-secret- avantage / ceci fonctionne dans la plupart des cas. omettre cela, j'ajoute une marge négative de plusieurs pixels au dernier élément au dernier élément. . Si ce dernier élément est flotté à la place, ajoutez simplement la marge négative à gauche. Jusqu'à présent, cela a travaillé pour moi dans les rares cas où Overflow: caché; sur l'élément final d'affilée au lieu de flotteur / largeur): débordement ne correspondait pas.
Cet avantage secret de la propriété de trop-plein est sexy
Je pense qu'une réponse simple pourrait être de ne pas ronder du tout, créez simplement un dernier élément "spacer" avec une largeur de 1% qui partage l'aspect des éléments 1 / 3ème. Même c.-à-d. Devrait être capable de traiter avec un arrondissement de 33 + 33 + 33 + 1.
J'ai eu le même problème. IE7 n'a pas rendu correctement 33,33%. Cela fonctionnerait avec 33%, mais il s'agissait d'une ligne de cheveux. J'ai utilisé les conseils du deuxième bloc de code dans la première réponse ci-dessus, plus un peu de hack. Cela a fonctionné pour moi, j'espère que cela aide.
.all-boxes {
width: 33.33%;
float: left;
display: inline;
*margin-right: -1px; /* Add the asterisk */
}