Come fare div galleggianti riempire lo spazio

StackOverflow https://stackoverflow.com/questions/326059

  •  11-07-2019
  •  | 
  •  

Domanda

Sto cercando di creare un " flusso di lavoro " barra in una pagina Web.

Gli elementi nel flusso di lavoro potrebbero avere lunghezze diverse.

Potrebbero esserci abbastanza elementi per riempire la larghezza dello schermo, quindi il flusso deve essere spostato sulla riga successiva.

Sto usando div galleggianti a sinistra per fare questo.

Tuttavia, vorrei che i div prendessero una quantità adeguata di larghezza dello schermo.

Se solo tre articoli possono adattarsi a una riga, allora vorrei che quegli elementi si adattassero uniformemente alla riga, tenendo conto della larghezza di ogni singolo elemento.

Tutto quello che posso ottenere al momento è che il div finale su una linea riempia lo spazio rimanente, il che spesso significa che i miei oggetti sono tutti allineati a sinistra, ad es. Posso ottenere un layout come questo: 

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

ma in realtà voglio che assomigli a qualcosa del genere: 

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

se vedi cosa intendo.

Devo usare le tabelle per questo piuttosto che i div fluttuanti?

È stato utile?

Soluzione

solo un paio di altri puntatori. Non dovresti avere tag li vuoti, che non sono semanticamente corretti. Anche in un mondo ideale dovresti non dare nomi di layout agli attributi id .

Personalmente posizionerei l'immagine iniziale su ul e poi posizionerei l'immagine finale sull'ultima immagine.

Altri suggerimenti

probabilmente potrebbe fare con il markup circostante per capire quali elementi sono presenti. Potresti provare ad avere un div circostante con margin: 0 auto;

Probabilmente avrai bisogno di un div circostante per ogni livello.

Grazie per le risposte rapide. Proverò quello che stai suggerendo.

Attualmente sto provando a farlo usando un elenco, anche se non ho ottenuto nulla con i div.

Ho provato a estrarre un po 'di HTML dei miei JSP per provare a dimostrare dove sto andando.

Gli span hanno una classe di " navigazione " che fondamentalmente disegna un'immagine di sfondo attorno al testo per renderlo simile a un pulsante, nonché impostare margini / paddings / ecc. Ho omesso il CSS che è direttamente correlato al disegno dei pulsanti, poiché si tratta di elementi standard del nostro sistema per disegnare un pulsante. Ho incluso il CSS che sto usando che è direttamente correlato al flusso di lavoro.

Sto cercando di disegnare un'immagine iniziale prima del primo pulsante e quindi disegnare immagini di sfondo dietro ogni pulsante per tracciare una linea tra ciascun pulsante per rappresentare il flusso. Ho quindi un'immagine finale alla fine del flusso. 

<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>

Impostando gli elementi li da visualizzare: inline, e dando a ul un text-align: justify la proprietà ti porterà a metà strada (almeno in FFX3 e IE7). Tuttavia, solleva alcune complicazioni quando si applicano le immagini di sfondo.

Per quanto non mi piaccia dire che le cose non possono essere fatte, penso di dover concordare con @johnners sull'elemento circostante per ogni livello di navigazione. Anche se dovessi usare il CSS del layout di una tabella avresti bisogno di una sorta di elemento circostante per ogni 'riga' per ottenere la spaziatura a destra e a destra.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top