Comment faire pour forcer un caché+vide <div> à prendre de la place?

Remarque que ma question n'est pas sur la façon de remplir l'espace restant avec <div>.

Arrière-plan:
Je suis en train d'utiliser jQuery triable avec une série de horizontalement disposés <div>, avec classe "column"

.column
{
  display:inline-block;
}

Maintenant dans FF, tout semble bon. Pendant le déplacement, le "espace réservé" qui jQuery sortable injecte est vide <div> avec

<div class="column ui-sortable-placehold" 
     style="visibility:hidden;height:[hh]px;width[ww]px;"/>

Le "inline-block", cet "espace réservé" à durée cependant, de nombreux [ww]px la <div> glissé.

(J'ai l'option "forcePlaceholderSize = true")

Toutefois, ce chiffre se décompose en IE7 car il ne sait display:inline. Mais si je change d'utiliser "display:inline" sur FF, l'espace n'aura plus de durée de [ww]px.

J'ai essayé de nombreuses solutions de contournement, y compris:

préciser ma propre espace réservé style.
de commutation css basé sur jQuery.le navigateur.msie.
css dynamique de l'expression.

aucun d'entre eux fonctionne de manière satisfaisante en raison de une raison ou une autre.

Il me semble que si seulement je peux forcer une taille sur les div vide, je vais être en mesure de résoudre ce problème d'une manière ordonnée. (Bien sûr, la neatiest solution est toujours pour le@#$%, SOIT être conformes aux normes pour commencer...)

De bonnes solutions de contournement de bienvenue.

S'il vous plaît aider!

OriginalL'auteur Xerion | 2009-09-25

9
```
.column {
    /* your stuff here */
    width: 100px;
    height: 200px;
}
```
Vous pouvez également jouer avec les propriétés CSS comme min-width et max-height, mais il y a IE6 limites avec celles-là, je crois.

Merci pour la réponse, Warren. jQuery fait déjà ajoute à la largeur/hauteur de l'espace réservé div comme indiqué ci-dessus. Et j'en ai besoin pour moi, puisque chaque déplaçable bloc est de taille différente. J'ai également précisé ma question en soulignant que la div "visibility:hidden". Il semble que caché divs ne prennent de la place seulement si son "display:inline-block" ?
Je ne vois pas pourquoi vous vous attendez à quelque chose qui est caché à prendre de l'espace. Caché signifie pas d'effet visible sur votre document. Il semble que vous voulez la div pour être vide, mais il suffit de prendre de l'espace. Si oui, vous pouvez supprimer le "caché" et "display" styles totalement. Depuis la div n'a pas de contenu, il sera juste un espace de prise de bloc dans votre document. Vous pouvez par la suite de remplir le div contenu, et sa taille ne change pas, en supposant que vous avez également régler "overflow: none'.
Ce n'est pas vrai. Il y a une différence b/w "affichage" et "visibilité". Selon cette page stackoverflow.com/questions/1479239/... "lorsque la visibilité est caché, l'élément étant caché occupe toujours sa même place dans la mise en page de la page. "Comme je l'ai expliqué dans mon post, jQuery-ui-triables plugin insère l'espace réservé div comme un vide+élément masqué. Je ne veux pas le mod le code du plugin, c'est donc a la recherche de façons de faire de l'espace w/o "display:inline-block" qui ne fonctionne pas sous IE7.

OriginalL'auteur Warren Young
6

De la façon classique de faire vide d'éléments de l'espace est d'ajouter   à l'intérieur d'eux. De t'aider dans ce cas?

C'est un célèbre encore très moche hack. Utiliser les css à la place.
Il n'y a rien de mal à être explicite, bien qu'il ne peut pas être pur CSS, mais il fonctionne.

OriginalL'auteur hrnt

Xerion,

Vous êtes en mesure explicitement de la force de l'espace réservé dimensions dans IE7+. Essayez le code ci-dessous:

$('.wpzone').sortable({
  sort: function (e, ui) { 
    $(".ui-state-highlight").css({"width":"100%", "height" : ui.item.height()});
  }
});

mon css:

.ui-state-highlight { width: 100%; height:auto; clear:left; border: 1px dashed #333; background-color: #d3dfd1; z-index:1; }

Je ne pense pas que le CSS affecte bien.

OriginalL'auteur vicgoyso

1

CSS peut être utilisé pour créer une div vide.
```
<style>
.empty {  
border-left:solid 10px white; 
border-right:solid 10px white; 
} 
</style>
```
Le style précédent, si elle est appliquée à un div vide, permettra de créer un espace de la largeur de 20px.

OriginalL'auteur user3160955

Vous devez vous connecter pour publier un commentaire.