Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jadsonlucena

utilizando multiple columns css3 em div.

Por , em Desenvolvimento frontend

Recommended Posts

jadsonlucena    0

jadsonlucena
Postado

Vejamos galera eu estou com este pequeno exemplo:

 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:24.4%;
top:29.4%;
width:50%;
height:40%;
border:thick solid #000;
background-color:#FF0000;

overflow:auto;

column-count:1;
column-gap:0;
-webkit-column-count:1;
-webkit-column-gap:0;
-moz-column-count:1;
-moz-column-gap:0;	

z-index:1;
}
.all {
margin-top:3%;
margin-left:5%;

float:left;

width:18%;
height:40%;
border:medium solid #000;
background-color:#0000FF;
}
-->
</style>
</head>

<body>
<div id="Layer1">

<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>
<div class="all"></div>

</div>
</body>
</html>

 

Meu exemplo online

 

Vejamos galera eu gostaria que as div's all ficassem alinhadas de forma horizontal dentro da div Layer1. Mas isto só está acontecendo no Mozilla Firefox.

Eu gostaria de sabem aonde está o meu erro, caso não tenha, você's conheceriam alguma outra maneira de fazer isso?

 

PS: Caso exista outra maneira, ela teria que se adequar as div's em porcentagem.

 

 

grato desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Não entendi bem ... você quer multiple columns css3 ou um slide? Se for a segunda opção é com jquery :natalsmile:

Compartilhar este post

Link para o post
Compartilhar em outros sites

jadsonlucena    0

jadsonlucena
Postado

"Giovani" se você olhar o meu exemplo online você irá perceber que no navegador Mozilla Firefox 4.0 ele aparece do jeito que eu quero, ou seja, as div's #all estão organizadas de forma horizontal dentro da div #Layer1. Mas no resto dos navegadores as div's #all estão organizadas de forma vertical, porque o código "css3 column" se remete a textos e não a div.

Então eu gostaria de alguma outra forma para que as div's all se organizem de forma horizontal dentro da div Layer1.

agradecido desde já!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então eu gostaria de alguma outra forma para que as div's all se organizem de forma horizontal dentro da div Layer1.

você vai precisar de mais uma DIV interna a Layer1.

 

Nessa interna, você deve colocar uma largura maior que a da Layer1, calculada automaticamente de acordo com a quantidade de .all que você tiver.

 

Assim você conseguirá criar o scroll horizontal.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito