Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » no me funciona float

CSS - no me funciona float

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 2
Ha disminuido su posición en 9 puestos en CSS (en relación al último mes)
Gráfica de CSS

no me funciona float

Publicado por Christian (2 intervenciones) el 12/03/2021 05:27:43
Hola

Quisiera que alguien me pudiera ayudar con un pequeno ejercisio que es estoy realizando donde estoy usando float para que 2 bloques queden a la par y que al final se vea seccionado como en la imagen "proyecto" que voy adjuntar, lo que pasa es que en un punto mis bloques quedan uno encima del otro y no se como hacer que queden bien.

Soy bastante nuevo en el tema y agradeceria mucho su ayuda.

Les adjunto las imagenes del HTML y CSS para que darme a entender mejor
Captura
css1
css2
html
proyecto
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

no me funciona float

Publicado por joel (252 intervenciones) el 12/03/2021 08:51:14
Hola Christian, no podemos copiar y pegar el código para probarlo...
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

no me funciona float

Publicado por christian (2 intervenciones) el 13/03/2021 19:29:03
Hola Joel, perdon aqui lo pego para que lo puedan ver

CSS
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
*{
    box-sizing: border-box;
}
 
.ejemplo0{
    background-color: aqua;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
 
.ejemplo{
    height: 200px;
    background-color: aqua;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
 
 
 
.ejemplo1{
 
    background-color: aqua;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    float: right;
    width: 40%;
    height: 300px;
}
 
.ejemplo2{
 
    background-color: aqua;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    float: left;
    width: 40%;
    height: 300px;
}
 
.ejemplo3{
    height: 200px;
    background-color: aqua;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
 
 
.ejemplo4{
 
    background-color: aqua;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    float: right;
    width: 47%;
    height: 300px;
}
 
.ejemplo5{
 
    background-color: aqua;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    float: left;
    width: 47%;
    height: 300px;
}

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<html>
    <head>
        <title>Cajas en CSS </title>
        <link rel="stylesheet" href="estilos3.css">
    </head>
    <body bgcolor="red">
        <div class="ejemplo0"> .</div>
        <div class="ejemplo"> .</div>
        <div class="cont1">
                <div class="ejemplo1">.</div>
                <div class="ejemplo2">.</div>
        </div>
 
        <div class="ejemplo3"> .</div>
 
        <div class="cont2">
            <div class="ejemplo4">.</div>
            <div class="ejemplo5">.</div>
        </div>
 
    </body>
</html>
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
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

no me funciona float

Publicado por joel (252 intervenciones) el 14/03/2021 08:55:31
Gracias Christian, lo he podido probar y ver donde tienes el problema.

El problema esta en que no caben uno al lado del otro, por eso el segundo se baja.
cambia por ejemplo en el estilo .ejemplo5 el with del 47% al 46%... veras que se te alinea
Eso, si, como trabajas con porcentaje (solo en el with), si haces el navegador mas pequeño puede ser que se te vuelva a bajar según la anchura del navegador.
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