HTML et CSS..adding côté divs côte à côte n fois

Question

je dois construire un HTML/mise en page CSS avec la mise en page suivante

| statique Div | Contenu DIV0 | Contenu Div1 | ... | Contenu DIVN | statique Div |

une version réduite de mon code est comme suit:

<div id="container"> 
    <div id="static_div_1"></div> 
    <div id="content"> 
     <div id="item1"></div> 
     <div id="item2"></div> 
     .... 
     <div id="itemN"></div> 
    </div> 
    <div id="static_div_2"></div> 
</div> 

Exigences:

1. Tous les DIVs ont besoin d'être empilés à côté de l'autre .
2. J'ai besoin d'ajouter dynamiquement des DIV dans le contenu DIV en utilisant javascript
3. Les DIV statiques ont besoin de maintenir leur position au début et à la fin du contenu.
4. contenu DIV doit faire défiler horizontalement

Je me bats avec les questions suivantes:

1. Après un moment, le div contenu commence enroulant commencent à rendre la DIV et une autre rangée de DIVs inséré.

Éditer: Ce n'est pas quelque chose de tabulaire dans la nature comme des données simples. Supposons que chaque div est comme une forme en soi. Quelque chose ressemblant à un W2. J'ai juste besoin de faire défiler le contenu DIV. . Pour rendre les choses pires que je ne suis pas vraiment un gars GUI .. :(

Toute aide sera grandement appréciée

Answer 1

Le code CSS dont vous avez besoin est la suivante:

#static_div_1, #static_div_2 { 
    float: left; 
    width: 200px; 
    } 
    #content { 
    float: left; 
    overflow-x: scroll; 
    white-space: nowrap; 
    width: 600px; 
    } 
    #content .item { 
    display: inline-block; 
    *display: inline; /* Target IE6/7 only */ 
    width: 150px; 
    zoom: 1; 
    } 

Remarque J'ai ajouté . une classe « élément » à chacun des éléments à l'intérieur du div #content leur style des clés de cette disposition sont les suivants:

1. Marque « float: left » les trois parties, # static_div_1, # static_div_2 et # contenu divs (et éventuellement définir un largeur fixe pour eux).
2. Le style "overflow-x: scroll" sur la div # content.
3. Le "white-space: nowrap" à la div # content.
4. Réglez "display: inline-block" sur chaque élément de la division #content.

Vous remarquerez qu'il y a un espace entre chacun des éléments. C'est l'espace de retour à la ligne, donc pour l'éviter, il ne doit pas y avoir de nouvelle ligne ou d'espace entre ces divs.

J'espère que cela vous sera utile. Cordialement.

MISE À JOUR: Cela fonctionne maintenant sur IE6/7. Pour le réglage correct de "display: inline-block" sur ces navigateurs, notez l'ajout des lignes:

... 
#content .item { 
    ... 
    *display: inline; /* Target IE6/7 only */ 
    ... 
    zoom: 1; 
    }