Como fazer flutuante divs preencher o espaço

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

  •  11-07-2019
  •  | 
  •  

Pergunta

Eu estou tentando criar uma barra de "fluxo de trabalho" em uma página web.

Os itens no fluxo de trabalho pode ser de diferentes comprimentos.

Pode haver itens suficientes para preencher a largura da tela, daí a necessidades de fluxo para embrulhar para a próxima linha.

Eu estou usando divs esquerda flutuantes para fazer isso.

No entanto, eu gostaria os divs para tomar uma quantidade adequada de largura da tela.

Se apenas três itens podem caber em uma linha, então eu gostaria esses itens para caber uniformemente na linha, tendo em conta cada um dos itens individuais largura.

Tudo o que posso obter no momento é para a div final sobre uma linha para preencher o espaço restante, que muitas vezes significa meus itens são alinhados à esquerda, por exemplo, Posso obter um layout parecido com isto: 

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

mas eu realmente quero que algo parecido com isto: 

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

Se você ver o que quero dizer.

Preciso mesas de uso para isso ao invés de divs flutuante?

Foi útil?

Solução

apenas um par de outros ponteiros. Você não deve ter marcas li vazias, que não é semanticamente correta. atributos também em um mundo ideal, você deve não dar id nomes de layout .

Pessoalmente eu colocar a imagem a partir da UL e em seguida, coloque a imagem de fechamento do último li.

Outras dicas

provavelmente poderia fazer com vendo a marcação em torno de compreender quais os elementos que você tem no lugar. Você poderia tentar ter uma div circundante com margin: 0 auto;

Você provavelmente vai precisar de uma div circundante, para cada nível.

Não desperdice o seu tempo basta ir aqui:

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

Obrigado pelas respostas rápidas. Vou tentar o que você está sugerindo.

Atualmente estou tentando fazer isso usando uma lista, embora eu também tenho nada com divs.

Eu tentei puxar um pouco de HTML dos meus JSPs, a fim de tentar demonstrar onde estou até com isso.

Os vãos têm uma classe de "navegação" que atrai basicamente uma imagem de fundo em torno do texto para torná-lo parecido com um botão, bem como definir margens / paddings / etc. Eu omitiu a CSS que está diretamente relacionada ao desenho botão, uma vez que este é padrão coisas quadro em nosso sistema para desenhar um botão. Eu incluí o CSS que eu estou usando o que está diretamente relacionado com o fluxo de trabalho.

Eu estou tentando desenhar uma imagem inicial antes do primeiro botão e, em seguida, desenhar imagens de fundo por trás de cada botão, a fim de traçar uma linha entre cada botão para representar o fluxo. Eu, em seguida, tem uma imagem que termina no final do fluxo. 

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

Definir os elementos li para exibir: inline, e dando ao ul um text-align: justify propriedade poderá ir a maneira da parte lá (em FFX3 e IE7, pelo menos). No entanto, ele faz levantar algumas complicações ao aplicar as imagens de fundo.

Tanto quanto eu não gosto de dizer coisas que não pode ser feito, eu acho que eu tenho que concordar com @johnners sobre o elemento circundante, para cada nível de navegação. Mesmo se você fosse usar CSS layout da tabela seria necessário algum tipo de elemento envolvente para cada 'linha', a fim de obter o espaçamento à esquerda e à direita correta.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top