css étirement flottant div horizontalement

J'essaye de faire un div avec une hauteur statique et une largeur variable. Avec plusieurs onglets horizontaux. L'onglet actif doit s'étendre horizontalement pour remplir le conteneur et les onglets inactifs doivent rétrécir jusqu'à leur taille inactive (24px dans ce cas).css étirement flottant div horizontalement

Je ne peux pas tout à fait le faire fonctionner. L'onglet s'étire, mais trop. Il heurte les onglets après la ligne suivante, ce qui ne devrait pas arriver. Je ne peux pas comprendre comment faire ce travail comme je le veux.

Ce que je suis en train de faire peut être vu à [lien supprimé]

Je suis sûr que Theres une façon de le faire, comme je l'ai vu faire, mais je ne peux pas trouver un exemple de cela. Savoir ce que je fais mal?

Source

2010-07-22 Bocochoco

veuillez poster un exemple. J'ai essayé votre code et je n'arrive toujours pas à comprendre ce que vous essayez de faire. – Catfish

Êtes-vous à la recherche d'un accordéon horizontal?

Il y a plusieurs exemples en ligne. Il peut être préférable de compter sur Javascript pour faire le calcul si vous voulez que l'onglet ouvert occupe tout l'espace MOINS la largeur des onglets, du conteneur.

Source

2010-07-22 20:48:37

C'est exactement ce que j'essayais de faire. Je ne pouvais pas penser à ce que ça s'appelait. Je vous remercie :) – Bocochoco

<style> 
#navigation 
{ 
    border: 1px solid #000000; 
    height: 400px; 
    margin: 10px 25px; 
    padding: 0px; 
    width: auto; 
} 
.item 
{ 
    display: block; 
    float: left; 
    height: 100%; 
    margin: 0px; 
    overflow: hidden; 
} 
.item img { float: left; margin-right: 5px;} 
.closed 
{ 
    width: 10%; 
} 
.open 
{ 
    width: 80%; 
} 

</style> 

</head> 

    <body> 
     <div id="navigation"> 
     <div class="item open"> 
      <img src="hometab.png" alt="Home" /> 

      Open Tab Open Tab 
     </div> 
     <div class="item closed"> 
      <img src="hometab.png" alt="Home" /> 
      Open Tab Open Tab 
     </div> 
     <div class="item closed"> 
      <img src="hometab.png" alt="Home" /> 
      Open Tab Open Tab 
     </div> 

     </div>

Source

2010-07-22 20:35:40 Developer

Voir le lien de l'exemple. Cela montre mieux ce que j'essaie de faire. – Bocochoco

Merci d'avoir rendu la question plus claire. vérifier l'anser – Developer

Comment vous êtes commis à width:auto sur #navigation?

Si vous définissez la largeur de #navigation sur quelque chose de fixe et que vous définissez également des valeurs de largeur appropriées pour .open, cela semble plutôt satisfaisant. Quand je jouais avec votre exemple dans FireBug j'ai utilisé 400 pour #navigation et 350 pour .open et il semble bien fonctionner.

Source

2010-07-22 20:52:48 theycallmemorty

Les éléments supplémentaires sont probablement passés à la ligne suivante parce que la largeur de votre onglet ouvert est de 100% - essayez de le définir à 80% ou 90%, pour laisser de la place pour les "onglets" supplémentaires après. Les onglets "fermés" devraient probablement avoir aussi un pourcentage de largeur, qui devrait tous s'ajouter à 100% - la largeur totale de leur conteneur.

Source

2010-07-22 20:56:34 SteveH

Après approche a fonctionné pour moi:

Soit « w » est la largeur originale de la div et que vous voulez l'étirer par des pixels « x ». Ajouter le code CSS suivant:

{ 
    width: (w + x) px; 
    margin-left: -x/2 px 
}

par exemple. Si la largeur d'origine est de 300 px et que vous souhaitez l'étirer de 50 px, des CSS supplémentaires seront:

{ 
    width: 350px; 
    margin-left: -25px 
}

Source

2016-02-12 06:46:18

css étirement flottant div horizontalement

Répondre

Questions connexes