Itens lado a lado em um container

[S t o n e 0]

Bom dia pessoal,

Seguinte, eu tenho uma lista de bloco no modelo linha de tempo mas eles estão ficando um a baixo de outro, o que eu precisaria é fazer com que eles fiquem lado a lado e não estou conseguindo fazer isto por css.

 

Segue a imagem

 

Segue a div(esta div é repetida dinamicamente, ou seja, cada bloco azul é uma div).

<div class="subevent" style="left: {left}; width: {width}; height: {height}; position: relative;"></div>

 

Css

.subevent { color:#fff; background:SteelBlue; overflow:hidden; font-size:10px; max-height: 15px; }

 

 

Agradeço desde já!

[Willian Makoto 6]

Tente um float: left;

 

[]'s

[S t o n e 0]

Se eu boto float: left, ele se perde nas posições já que eu uso o "left" para definir a posição do elemento, note que, também estou usando o "position: relative" para que o "left" funcione.

[André do Vale 76]

Não é necessário posicionamento relativo para a flutuação de elementos. E seu código parece estar recebendo um valor dinâmico para a esquerda do elemento, e caso a linha não tenha espaço suficiente, o elemento irá "cair":

 

left: {left}

[S t o n e 0]

Caso eu não utilize a posição relativa o elemento não obedece a propriedade left, eu utilizo left para posicionar o elemento na linha do tempo, qual seria uma solução para posiciona-los lado a lado e não "quebrando a linha"?

 

Não é necessário posicionamento relativo para a flutuação de elementos. E seu código parece estar recebendo um valor dinâmico para a esquerda do elemento, e caso a linha não tenha espaço suficiente, o elemento irá "cair":

 

left: {left}

[Thiago Souza Farias 0]

Stone fiz um teste aqui. Sem utilizar relative e com float:left.

Não criei repetição dinâmica, mas pra teste deixei alguns divs em sequência, dá uma olhada se é isso que você precisa. Coloquei o border só pra conseguir diferenciar onde começa uma e termina a outra div.

 

<div class="aaa"></div>

<div class="aaa"></div>

<div class="aaa"></div>

<div class="aaa"></div>

<div class="aaa"></div>

<div class="aaa"></div>

 

.aaa {background:#ccc; width:200px; height:30px; float:left; border:1px solid #FFF;}

[S t o n e 0]

Thiago Souza Farias

 

O problema é que eu uso a propriedade "left" para posicionar e se eu usar a propriedade "float" junto a ela os elementos bagunçam de posição.

[André do Vale 76]

Thiago Souza Farias

 

O problema é que eu uso a propriedade "left" para posicionar e se eu usar a propriedade "float" junto a ela os elementos bagunçam de posição.

 

Se eles "bagunçam", aí sim tem algo errado em outras declarações. Eles estão pulando de linha justamente por ter esse "left". Se quiser manter o "left", o correto seria posição absoluta.

 

Somente com "float: left", os elementos devem sim ficar organizados em linha (havendo espaço, claro). :thumbsup:

[S t o n e 0]

Certo, entendi, vou fazer um exemplo com float left e postar aqui pra vocês.

 

Pessoal, fiz o seguinte.

<div class="subevent" style="background-color: {color}; width: {width}; height: {height}; float: left;">{name}</div>

 

Teóricamente funciona sem o left pois não tenho intervalos de tempo, mas ainda tenho que pensar se isso não causará problemas futuros, meu problema é que agora tenho registros a mais, isto ocasiona uma quebra de linha no final, existe alguma forma de ocultar esses registros maiores no elemento, tentei "overflow: hidden" mas não obtive sucesso.

 

Obrigado

 

Segue uma imagem para melhor entendimento.

 

[André do Vale 76]

Stone, aí entra em questão a largura dos elementos também. Veja que eles pulam pra próxima linha pois não há espaço para continuar flutuando a direita. E junto com o que caiu numa linha, os próximos dele (na marcação), também caem. Reveja o limite de largura do pai, ou algum ancestral limitado.

 

PS.: isto que você está tentando fazer, são dados tabulares?

[S t o n e 0]

André Campos,

Não são tabulares, porém devem obedecer a linha do tempo, como pode ver há uma marcação de tempo no topo, por isto eu estava usando a propriedade "left" eu faço um calculo para saber o valor do "left" para que posicione exatamente no horário, mas usando float teóricamente não preciso disto já que não tenho intervalos vazios de tempo sempre um registro vem após o outro, a solução que eu procuro é, em vez de quebrar linha, os próximos registros se "esconderem" atraz da div pai, existe uma solução para isto?

 

Valeu

[André do Vale 76]

Se o pai tiver uma largura declarada, aplicar overflow:hidden dele é bem provável de dar certo.

 

Você consegue postar o HTML final (não precisa dos dados), como é gerado?

[S t o n e 0]

Se o pai tiver uma largura declarada, aplicar overflow:hidden dele é bem provável de dar certo.

 

Você consegue postar o HTML final (não precisa dos dados), como é gerado?

 

Vou tentar resumir ao máximo,

eu uso um framework javascript(ExtJS) e um plugin para montar linhas do tempo, mas este plugin não oferece sub eventos, eu faço isto usando HTML, tenho vários eventos e dentro destes eventos tenho subeventos, eu preciso deixar estes sub eventos lado a lado para facilitar a visualização já que serão várias linhas, no firebug fui até a div pai destes subeventos e a mesma já está aplicado o "overflow: hidden", porém, o conteúdo(subeventos) continua quebrando linha, caso os subeventos se "escondecem" na div pai já resolveria o problema.

 

Segue uma screenshot da timeline completa.

 

Como pode ver, possuo várias divs pais com vários sub eventos, estes sub eventos deveram se "esconder" atraz das divs pai(que já possuem overflow: hidden).

[André do Vale 76]

Já que você diz estar usando o Firebug, cola aqui por favor os atributos da aba "Executado" deste elemento pai, e dos 2 "sub-eventos" que começam cada linha.

[S t o n e 0]

Aqui está o html gerado pelo Framework.

 

<div class="sch-event-inner " unselectable="on">
<div class="subevent" style="background-color: #CDE2F8; width: 0; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #AED0F3; width: 0.716666666666697; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #87B9ED; width: 0; height: 13; float: left;">Parada</div>
<div class="subevent" style="background-color: #68A7E8; width: 171.99999999999994; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #4592E2; width: 6.4500000000000455; height: 13; float: left;">Na Direção (Tempo Excedido)</div>
<div class="subevent" style="background-color: #2680DD; width: 42.2833333333333; height: 13; float: left;">Parada Prolongada</div>
<div class="subevent" style="background-color: #1D6CBD; width: 12.18333333333328; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #185A9F; width: 20.783333333333417; height: 13; float: left;">Parada</div>
<div class="subevent" style="background-color: #144D89; width: 131.14999999999998; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #104173; width: 70.94999999999993; height: 13; float: left;">Parada Prolongada</div>
<div class="subevent" style="background-color: ; width: 158.38333333333333; height: 13; float: left;">Na Direção</div>
</div>

 

css

.sch-event-inner {

height: 100%;

margin-left: 3px;

margin-right: 5px;

margin-top: 2px;

overflow: hidden;

white-space: nowrap;

}

 

Já que você diz estar usando o Firebug, cola aqui por favor os atributos da aba "Executado" deste elemento pai, e dos 2 "sub-eventos" que começam cada linha.

[André do Vale 76]

A classe .sch-event-inner recebe largura Stone? Se não, é possível aplicá-la (parece que ela também é dinâmica pelo tipo de aplicativo)?

[S t o n e 0]

Ela é dinâmica sim, ela é montada através de uma data inicial e final que eu devo passar dinamicamente, provavelmente o framework monta a largura através da data inicial e final