CSS - Posicionar dos capas

 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 58 puestos en CSS (en relación al último mes)
Gráfica de CSS

Posicionar dos capas

Publicado por George (1 intervención) el 03/03/2019 21:02:16
Buenas mi problema es el siguiente: tengo dos capas, una a la izquierda con float y otra a la derecha con float tmb:

Captura



Mi problema es que al reducir la ventana quiero que la capa de la derecha se ponga debajo de la capa de la izquierda y que ocupen toda la ventana tal que asi:

Captura
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Posicionar dos capas

Publicado por ScriptShow (125 intervenciones) el 03/03/2019 22:01:52
Saludos George,

a ver si te sirve un ejemplo base:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.box1 {
float:left;
width:200px;
padding:4px;
margin:4px auto;
text-align:center;
border:2px solid #D0D0D0;
}
.box2 {
float:right;
width:200px;
padding:4px;
margin:4px auto;
text-align:center;
border:2px solid #D0D0D0;
}
@media only screen and (max-width:620px) {
.box1, .box2 {
width:100%;
}
}
</style>
</head>
<body>
<div class="box1">
<h2>Caja 1</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="box2">
<h2>Caja 2</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
</html>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar