Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá
Preciso de uma ajudinha para resolver uma questão de posicionamento de divs. Fiz umas imagens para ajudar a explicar.
Nesta primeira aparecem as divs em seus locais padrões com a janela do navegador totalmente maximizada:
Minha intenção agora é que a Div4 fique entre a div2 e div3 quando a tela for reduzida (um tablet, por exemplo), ficando assim:
Será que alguém pode me ajudar a montar o css para isso? Ficarei grato por qualquer dica.
@Maujor
Eu não fiz nada ainda do CSS e HTML. Esses desenhos fiz num programa vetorial, não é um print da tela.
Se precisar de um ponto de partida para análise, vou precisar de um tempo para montar os códigos.
@Artes Ussler
Monte os códigos.
Use grid layout que vai facilitar e muito
Olá segui a dica que o Maujor disse, só que no firefox e chrome funcionam, mas no IE problema não funciona.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 30px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>grid-template-columns</h1>
<p>Use the <em>grid-template-columns</em> property to specify the size of each column.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>>
Em 3/26/2018 at 12:03, cesarhtc disse:
Olá segui a dica que o Maujor disse, só que no firefox e chrome funcionam, mas no IE problema não funciona.
Como mostra o Can I Use, CSS Grid Layout só tem suporte parcial ao IE, usando o prefixo -ms-.
Devido a isso, se não quiser lidar com incompatibilidades e algo complexo, recomendo que estude sobre design responsivo e fluid grid.
Links úteis:
-
Livro do Ethan Marcotte (pioneiro da metodologia responsiva);
-
WTRICKS.
1. Obrigado João por colocar o link para nossos vídeos sobre o assunto
2. O problema levantado no tópico é justamente o que foi explicado no vídeo que foi publicado hoje:
simples, faz uma div pra englobar essas 4 ai, dps poe div 1 com float:left e as outras 3 divs com float:right
Poste a marcação HTML e as CSS atuais.