0

Estou tentando criar um página igual a que está na foto, mas sem sucesso. Pelo que andei vendo preciso usar a propriedade float.

inserir a descrição da imagem aqui

Cheguei até esse ponto, mas também não está responsivo. inserir a descrição da imagem aqui

Na segunda foto que eu criei, não consigo fazer as 4 imagens pegarem a tela toda e o layout continuar responsivo.

7
  • Primeiramente bem vindo, o que você já tentou fazer? Commented 6/12/2018 às 18:13
  • 1
    Poderia editar a pergunta e adicionar as suas tentativas, bem como o resultado que obteve em cada uma delas? Atualmente a sua pergunta está quase um "façam para mim", mas acho que não é isso que você quer, é?
    – Woss
    Commented 6/12/2018 às 18:13
  • 1
    Jovem mesmo sem ver seu código já te falo que a melhor solução para isso não é com Float, pois float é ajustar o fluxo do conteúdo, dos elementos e do texto. Para fazer layouts nos dias de hoje de preferência para Flex e Grid ou os dois Juntos se precisar.
    – hugocsl
    Commented 6/12/2018 às 18:15
  • entao, nao consigo com float nem BootStrap Commented 6/12/2018 às 18:16
  • Conseguir vc consegue... só não deve... Vou fazer um exemplo simples pra vc com Flex
    – hugocsl
    Commented 6/12/2018 às 18:19

1 Resposta 1

4

Segue um modelo feito em flex. Aqui tem um guia completo que pode te ajudar. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Exiba os código em tela cheia para ver a responsividade e como se comportam. Em telas menores que 768px eles fica com o box maior encima e os menores embaixo. Em telas grandes ficam lado a lado.

inserir a descrição da imagem aqui

Os valores aqui estão todos em % por isso fica bem responsivo, e a altura do container eu deixei com 50vh, 50% da altura do body. Mas vc pode colocar um valor fixo aqui em px se quiser deixa a altura sempre com om tamanho definido .container { height: 50vh; }

Segue o código referente a imagem acima:

OBS: Eu poderia ter otimizado mais o CSS pois alguma propriedades se repetem muito, mas preferi deixar assim para facilitar o entendimento.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
    border: 1px solid #000;
}
.container {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.box {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width:768px) {
.container {
    flex-direction: column;
}
}   
.left, .right {
    width: 100%;
}
}
<div class="container">
    <div class="left">esquerda</div>
    <div class="right">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</div>


Com Float

Mesmo layout acima, porém usando Float. Apenas para fins didáticos para vc ver como ficaria usando Float. Apesar de eu não recomendar, e de ficar mais complicado de alinhar ao centro os elementos internos.

Exiba o código abaixo

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
    border: 1px solid #000;
}
.container {
    width: 100%;
    height: 50vh;
}
.left {
    width: 50%;
    height: 100%;
    float: left;
}
.right {
    width: 50%;
    height: 100%;
    float: left;
}
.box {
    width: 50%;
    height: 50%;
    float: left;
}
    
@media screen and (max-width:768px) {
.left {
    width: 100%;
    height: 50%;
    float: left;
}
.right {
    width: 100%;
    height: 50%;
    float: left;
}
}
<div class="container">
    <div class="left">esquerda</div>
    <div class="right">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</div>

4
  • mais como eu faria, para fazer a quebra ... exemplo que que quando chegue no breakpoint x as 4 imagens seja redirecioanda para baixo Commented 6/12/2018 às 19:15
  • @RoneyBerti Bom tranquilo, basta criar um @media screen and (max-width:768px) { seus ajustes } No caso do Flex vc coloca flex-direction como coluna e direita e esquerda agora com 100% da largura, e no Com Float vc coloca direita e esquerda agora com 100% da largura, porém agora com altura de 50%. Pode ver no código que eu já atualizei como os @media pra facilitar pra vc
    – hugocsl
    Commented 6/12/2018 às 19:35
  • 1
    cara era isso mesmo, muito obrigado mesmo ... vou estudar seus códigos para intender um pouco ... o dia que você der aula me chama sem falta. Commented 6/12/2018 às 20:04
  • @RoneyBerti cara eu tb sou aluno ainda, não tenho como dar aula :D. Mas que bom que deu certo! Se a minha resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone ✔ abaixo das setinhas no lado esquerdo da minha resposta :) assim o site não fica com perguntas abertas pendentes sem resposta aceita. Abs
    – hugocsl
    Commented 6/12/2018 às 20:06

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 .