Comment faire pour div diviser l'espace

Je suis en train de créer une barre de "workflow" sur une page Web.Comment faire pour div diviser l'espace

Les éléments du flux de travail peuvent avoir des longueurs différentes.

Il peut y avoir suffisamment d'éléments pour remplir la largeur de l'écran, d'où le flux doit s'enrouler sur la ligne suivante. J'utilise des divs flottantes à gauche pour faire cela. Cependant, je voudrais que les divs prennent une quantité appropriée de largeur d'écran.

Si seulement trois éléments peuvent tenir sur une ligne, alors je voudrais que ces éléments s'ajustent uniformément sur la ligne, en tenant compte de la largeur de chaque élément individuel. Tout ce que je peux obtenir en ce moment est pour le div final sur une ligne pour remplir l'espace restant, ce qui signifie souvent que mes éléments sont tous alignés à gauche, par ex. Je peux obtenir une mise en page comme ceci:

 
AAAA -> BBBBB -> 
CCCCCCCCCCCCCCCCCCC -> DD -> EEE -> 
FFFFF -> GGGG -> HHHHH

mais je veux vraiment à ressembler à quelque chose comme ceci:

 
     AAAA -> BBBBB -> 
CCCCCCCCCCCCCCCCCCC -> DD -> EEE -> 
    FFFFF -> GGGG -> HHHHH

si vous voyez ce que je veux dire.

Ai-je besoin d'utiliser des tables plutôt que des divs flottantes?

Source

2008-11-28 A_M

Je pense que votre diagramme n'est pas utile, on dirait que vous voulez centrer les choses ... mais vous voulez vraiment que tous les éléments remplissent la largeur de la page ... – inspite

juste un couple d'autres pointeurs. Vous ne devriez pas avoir de balises li vides, ce qui n'est pas sémantiquement correct. Aussi dans un monde idéal, vous devriez not give id attributes layout names.

Personnellement, je placerais l'image de départ sur le ul, puis placer l'image de fermeture sur le dernier li.

Source

2008-11-28 20:52:51

pourrait probablement faire avec voir le balisage environnant pour comprendre quels éléments vous avez en place. Vous pourriez essayer d'avoir une div environnante avec margin: 0 auto;

Vous aurez probablement besoin d'une div environnante pour chaque niveau.

Source

2008-11-28 15:44:22

Ne perdez pas votre temps juste aller ici:

http://www.cssmenubuilder.com/build-breadcrumb-menu

Source

2008-11-28 15:48:20 inspite

Merci pour les réponses rapides. Je vais essayer ce que vous suggérez.

J'essaye actuellement de faire ceci en utilisant une liste, bien que je n'ai également obtenu nulle part avec des divs.

J'ai essayé d'extraire du code HTML de mes pages JSP pour essayer de montrer où j'en suis.

Les travées ont une classe de "navigation" qui dessine essentiellement une image de fond autour du texte pour lui donner l'apparence d'un bouton, ainsi que pour définir des marges/paddings/etc. J'ai omis le CSS qui est directement lié au dessin des boutons, puisque c'est un framework standard dans notre système pour dessiner un bouton. J'ai inclus le CSS que j'utilise qui est directement lié au flux de travail.

J'essaie de dessiner une image de départ avant le premier bouton, puis dessiner des images de fond derrière chaque bouton afin de tracer une ligne entre chaque bouton pour représenter le flux. J'ai ensuite une image de fin à la fin du flux.

<html> 
<body> 

<STYLE> 
#nav, #nav ul { 
    list-style: none; 
    margin: 0px; 
    width: 700px; 
} 

#nav li { 
    list-style: none; 
    float: left; 
    padding-left: 10px; 
    padding-right: 10px; 
    width: auto; 
    background-image: url(/lookandfeel/images/navMenuDiv.gif); 
    background-repeat: repeat-x; 
} 

li#ending { 
    background-image: url(/lookandfeel/images/navMenuRight.gif); 
    background-repeat: no-repeat; 
} 

li#start { 
    background-image: url(/lookandfeel/images/navMenuLeft.gif); 
    background-repeat: no-repeat; 
} 

.navigation a { 
    background-image: url(/pdr/images/navigation.gif); 
} 
</STYLE> 

<ul id="nav" style="width: 100%;border: 1px solid"> 
    <li id="start" /> 
    <LI > 
    <SPAN class="navigation" >AAAAAAAAAA</SPAN> 
    </li> 
    <LI > 
    <SPAN class=navigation >BBBB</SPAN> 
    </li> 
    <LI > 
    <SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN> 
    </li> 
    <LI> 
    <SPAN class=navigation>DDDDDDDDD</SPAN> 
    </li> 
    <LI> 
    <SPAN class=navigation>EEEEEEEE</SPAN> 
    </li> 
    <LI> 
    <SPAN class=navigation>FFFFFFFFFFFFFF</SPAN> 
    </li> 
    <li> 
    <SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN 
    </LI> 
    <li id="ending" /> 
    </ul> 
</body> 
</html>

Source

2008-11-28 16:11:35

Réglage des éléments li à afficher: en ligne, et en donnant la ul un texte-align: justify propriété vous faire partie chemin (en FFX3 et IE7 au moins). Cependant, cela soulève quelques complications lors de l'application des images d'arrière-plan.

Source

2008-11-28 16:28:39 AaronSieb

Même si je n'aime pas dire que les choses ne peuvent pas être faites, je pense que je dois être d'accord avec @johnners sur l'élément environnant pour chaque niveau de navigation. Même si vous utilisiez la mise en page CSS, vous auriez besoin d'une sorte d'élément environnant pour chaque 'ligne' afin d'obtenir l'espacement à gauche et à droite correct.

Source

2008-12-09 09:51:51

Comment faire pour div diviser l'espace

Répondre

Questions connexes