1

Bom, eu tenho a div items e a div items2, que estão ambas inseridas dento de 1 div.

O que pretendia fazer era colocar alinhadas a div items e a div items2, visto que a div items2 fica sempre por baixo da outra.

O que está a acontecer:

http://afdtorre.pt/goncalo/

Código:

<style>
body{
background-image: url("imagens/fundo.png");
background-repeat: no-repeat;
background-size: cover;
margin:0;
}   

.container{
margin-left:10%;
margin-right:10%;
width:80%;  
position:relative;
height:100%;
}

.logo{  
position:absolute;
margin-top:1.5%;
}
.bloco1{
position:absolute;
background-color:#B200B2;
height:0.5%;
width:100%;
margin-top:16%; 
}

.linha1{
margin-left:20%;
background-color:#ABABAB;   
height:5%;
width:20%;
margin-top:2%;
position:absolute;
}


.online{
margin-left:60%;
margin-top:0%;
position:absolute;
}

.jack{
background-color:#ABABAB;   
height:5%;
max-width:20%;
margin-left:80%;
position:absolute;  
}


.loginsteam{
position:absolute;  
margin-top:7%;
margin-left:80%;

}

.bloco2{
position:absolute;
background-color:#B200B2;
height:0.3%;
width:70%;
margin-top:31%; 
margin-left:30%;
}

.menu{
margin-top:10%; 
margin-left:20%;
position:absolute;
font:20px proxima_nova_condensedlight;
color:#BEBEBE;
width:50%;
}

.status{
position:absolute;
width:55%;
height:6%;
border-style: solid;
border-width: 0.1px;
margin-top:16.8%;
margin-left:44.8%;
font-family:proxima_nova_cn_rgregular,sans-serif;
}
.items{
position:absolute;
width:100%;
margin-top:20%;
height:15%;
display:flex;
}
.item{
border-style: solid;
border-width: 0.1px;
width:10%;
}

.addskins{
position:absolute;
margin-top:30%;
height:9%;
width:28%;
background-color:#E8E800;
border:2px solid #646473;
}
.estadocinza{
position:absolute;
margin-top:38%;
font:20px proxima_nova_condensedlight;
color:#BEBEBE;

}

</style>
<header>
<div class="container">
<div class="jack">
Best Jackpot: Goncalo
</div>


<div class="online">
<span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:18px; text-transform: uppercase;">Online:</span>
<span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:17px; text-transform: uppercase;"><b>20</b></span>  
</div>

<div class="menu">
<span>SUPPORT</span> <span style="margin-left:2%;"><b>FAQ</b></span> <span style="margin-left:2%;"><b>TOP 10</b></span> <span style="margin-left:2%;"><b>GIVEWAY</b></span>
</div>

<div class="bloco1">
</div>

<div class="status">
<span style="color:#A9A9A9; margin-left:1%;">Winner:</span> <span style="color:#FEA601;"><b>Goncalo</b>
<span style="color:#A9A9A9; margin-left:1%; margin-top:-2%;">Win Chance:</span> <span style="color:#FEA601;"><b>10%</b>
<span style="color:#A9A9A9; margin-left:1%; margin-top:-2%;">Deposited:</span> <span style="color:#FEA601;"><b>20.15</b>
<span style="color:#A9A9A9; margin-left:1%; margin-top:-2%;">Round Hash:</span> <span style="color:#FEA601;"><b>EA32432..</b>
</div>

<div class="items">
<div class="item">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
</div>

<div class="loginsteam">
<img src="imagens/login.png">
</div>


<div class="logo">
<img src="imagens/logo.png">
</div>

<div class="bloco2">
</div>

<div class="addskins">
Add Skins
</div>

<span class="estadocinza">You Deposited:</span>
<br>
<br>
<span class="estadocinza">You Deposited:</span>
<br>
<br>    
<span class="estadocinza">You Deposited:</span>
</div>
</header>

Como poderei fazer?

2
  • 1
    Tá bem extenso seu código, dificultando um pouco o entendimento. Só uma dúvida, float:left não resolve seu problema?
    – Marconi
    Commented 29/05/2017 às 14:21
  • Ia dizer isso. Use float: left nas suas classes. Nota: Não comece nome de classes com números. Nota 2: Não faz sentido criar classes diferentes para todas as divs filhas. Commented 29/05/2017 às 14:23

1 Resposta 1

2

Utilize os recursos do bootstrap para isso, no seu caso, use os conceitos do grid system

O que é o Grid System?

Grid System é usado para criar layouts de páginas utilizando uma série de linhas e colunas, sua página será dividida em 12 colunas, que irão váriar de tamanho conforme a resolução do navegador.

Veja abaixo um exemplo prático da ideia:

.col {
  border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col col-xs-4">
      Coluna ocupando 4 de 12 colunas
    </div>
    <div class="col col-xs-4">
      Coluna ocupando 4 de 12 colunas
    </div>
    <div class="col col-xs-4">
      Coluna ocupando 4 de 12 colunas
    </div>
  </div>
  <div class="row">
    <div class="col col-xs-6">
      Coluna ocupando 6 de 12 colunas
    </div>
    <div class="col col-xs-2">
      Coluna ocupando 2 de 12 colunas
    </div>
    <div class="col col-xs-2">
      Coluna ocupando 2 de 12 colunas
    </div>
    <div class="col col-xs-2">
      Coluna ocupando 2 de 12 colunas
    </div>
    <div class="col col-xs-5">
      Coluna ocupando 5 de 12 colunas
    </div>
  </div>
</div>

Note que dividi o html em duas linhas (div com a class row);

  • Na primeira linha defini 3 colunas e cada coluna ocupa o espaço de 4 colunas (div com a classe col-xs-4) no sistema de grid (lembre que o layout é dividido em 12 colunas)
  • Note que na segunda linha , defini mais que 12 colunas, foram 17 no total, sendo que a última, que não serviu automaticamente foi jogada para baixo, porém, ainda na mesma linha.

Configuração das resoluções

Agora, lembra que comentei que o Grid System é utilizado para tornar sua página responsiva? Então, você pode definir uma quantidade diferente de colunas em cada resolução, veja a definição:

  • lg - Dispositivos grandes (desktops, >= 1200px)
  • md - Dispositivos médios (desktops, >= 992px && < 1200px)
  • sm - Dispositivos pequenos (tablets, >= 768px && < 992px)
  • xs - Dispositivos extra pequenos (smartphones, < 768px)

Como usar as colunas por resolução?

Use os marcadores de resolução citados acima com a quantidade de colunas que deseja para cada resolução, veja um exemplo abaixo, vou definir

  • 6 colunas para mobile
  • 5 colunas para dispositivos pequenos
  • 4 colunas para dispositivos médios
  • 3 colunas para dispositivos grandes

A declaração da classe na div ficaria da seguinte maneira:

  • <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"></div>

Pode parecer um pouco complicado o Grid System à primeira vista, mas com o tempo você entende todo seu funcionamento e verá o quão mais rápido é criar layouts dessa maneira.

Há vários recursos na internet que explicam sobre esse recurso, e a documentação também é bem clara (porém em Inglês), no entanto há muito conteúdo em português também (só dar uma "googlada"), mas veja esse pra começar.

3
  • Ou seja, eu ao utilizar bootstrap, não posso ter medidas pré-definidas e sim usar as medidas do boostrap certo?
    – Gonçalo
    Commented 29/05/2017 às 18:53
  • Pode utilizar sim Gonçalo, da maneira que preferir. O que estou te mostrando é apenas a forma "padrão" do boostrap de organizar o layout. O bootstrap é apenas um framework CSS que pode facilitar um pouco sua vida na hora de criar layouts, mas isso não quer dizer que não possa usar CSS puro no seu HTML, assim como pode também alterar as classes do Bootstrap da maneira que desejar. Commented 29/05/2017 às 19:05
  • Entendi mais ou menos a ideia, mas então, porquê eu utilizei pixeis e deu aquele erro, apresentado acima?
    – Gonçalo
    Commented 29/05/2017 às 19:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .