Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Como mostrar divs en una sola fila

CSS - Como mostrar divs en una sola fila

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

Como mostrar divs en una sola fila

Publicado por Lisandro (6 intervenciones) el 31/08/2017 22:09:28
Hola amigos, espero puedan darme una mano con esto.
Quiero mostrar en pantalla el divs que esten en una misma linea, pero resulta que el segundo div se va un poco mas abajo que el primero alguien puede decirme que error esoy cometiendo??

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
<!DOCTYPE html>
<html>
<head>
<title></title>
    <style type="text/css">
    #contenedor-principal{

        width: 100%;
        background-color: green;
    }
    #contenedor{

        width: 100%;
        background-color: white;
        float: left;
        display: inline;
    }
         .formu{
        float: left;
    }
    </style>
</head>
    <body>
        <div id="contenedor-principal">
            <div><h1>Planta Baja</h1></div>
                <div id="contenedor">
                    <div><h2>RRHH</h2></div>
                        <div class="formu">
                            <img src="fotos/off.png" width=50px height=80px>
                            <form action="procesarLuces.php" method="post" id="enviarON1">
                            <input type="hidden" name="enviarON1" value="onFoco1"/>
                            </form>
                            <form action="procesarLuces.php" method="post" id="enviarOFF1">
                            <input type="hidden" name="enviarOFF1" value="offFoco1"/>
                            </form>
                            <button form="enviarON1" class="on" type="submit" name="foco1" value="1" >on</button>
                            <button form="enviarOFF1" class="off" type="submit" name="foco1" value="0" >off</button>
                        </div>
                    <div><h2>Contabilidad</h2></div>
                        <div class="formu">
                            <img src="fotos/off.png" width=50px height=80px>
                            <form action="procesarLuces.php" method="post" id="enviarON2">
                            <input type="hidden" name="enviarON2" value="onFoco2"/>
                            </form>
                            <form action="procesarLuces.php" method="post" id="enviarOFF2">
                            <input type="hidden" name="enviarOFF2" value="offFoco2"/>
                            </form>
                            <button form="enviarON2" class="on" type="submit" name="foco2" value="1" >on</button>
                            <button form="enviarOFF2" class="off" type="submit" name="foco2" value="0" >off</button>
                        </div>
                        <div class="formu">
                            <img src="fotos/off.png" width=50px height=80px>
                            <form action="procesarLuces.php" method="post" id="enviarON3">
                            <input type="hidden" name="enviarON3" value="onFoco3"/>
                            </form>
                            <form action="procesarLuces.php" method="post" id="enviarOFF3">
                            <input type="hidden" name="enviarOFF3" value="offFoco3"/>
                            </form>
                            <button form="enviarON3" class="on" type="submit" name="foco3" value="1" >on</button>
                            <button form="enviarOFF3" class="off" type="submit" name="foco3" value="0" >off</button>
                        </div>
                    </div>
                </div>
        </body>
</html>
div
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 Pedro
Val: 17
Ha disminuido su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

Como mostrar divs en una sola fila

Publicado por Pedro (1 intervención) el 31/08/2017 23:36:06
Pues mi estimado amigo ha llegado el momento de conocer elementos inline y los elemento block ¿Cómo puedo explicártelo sencillo para que lo entiendas?

Un elemento inline es un <span> un <img> por consiguiente se añaden en linea y ocupan el espacio de lo que contienen en medida, espero me entiendas.

Un elemento block como su nombre indica es un bloque que ocupa todo el espacio de pantalla para que me entiendas y su height es igual al height del elemento que contenga. Por ejemplo h1 div p son elementos bloque

¿Pero que ocurre si queremos hacer trampa? pues que podemos hacerla dándole en los stylos display:inline o display:block , te recomiento buscar un poco por San Google para poder rematar la información que te he brindado.

También busca información sobre float:left seguro encontrarás cosas interesantes.

Suerte amigo espero te acuestes todos los días aprendiendo cosas nuevas como lo hago yo.

PD: Que conste para mis lectores que no voy de listillo sólo sigo un Refrán que dice: Para Aprender Hay Que Enseñar, es cierto porque mostrando lo que sabes afianzas conocimientos yo me considero un aprendíz eterno.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
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

Como mostrar divs en una sola fila

Publicado por ScriptShow (125 intervenciones) el 01/09/2017 12:48:40
Saludos Lisandro,

simplificando y organizando un poco, quedaría:

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
<!DOCTYPE html>
 
<html>
<head>
<title></title>
<style type="text/css">
#principal {

width: 100%;
background-color: green;
}
 
.formulario {
min-width: 280px;
display: inline-block;
}
 
form {
width: auto;
display: inline-block;
}
</style>
</head>
<body>
<div id="principal">
<h1>Planta Baja</h1>
</div>
<div class="formulario">
<h2>RRHH</h2>
<img src="fotos/off.png" width="50" height="80">
<form action="procesarLuces.php" method="post" id="enviarON1">
<input type="hidden" name="enviarON1" value="onFoco1">
<button class="on" type="submit" name="foco1" value="1">on</button>
</form>
<form action="procesarLuces.php" method="post" id="enviarOFF1">
<input type="hidden" name="enviarOFF1" value="offFoco1">
<button class="off" type="submit" name="foco1" value="0">off</button>
</form>
</div>
<div class="formulario">
<h2>Contabilidad<h2>
<img src="fotos/off.png" width="50" height="80">
<form action="procesarLuces.php" method="post" id="enviarON2">
<input type="hidden" name="enviarON2" value="onFoco2">
<button class="on" type="submit" name="foco2" value="1">on</button>
</form>
<form action="procesarLuces.php" method="post" id="enviarOFF2">
<input type="hidden" name="enviarOFF2" value="offFoco2">
<button class="off" type="submit" name="foco2" value="0">off</button>
</form>
<img src="fotos/off.png" width="50" height="80">
<form action="procesarLuces.php" method="post" id="enviarON3">
<input type="hidden" name="enviarON3" value="onFoco3">
<button class="on" type="submit" name="foco3" value="1">on</button>
</form>
<form action="procesarLuces.php" method="post" id="enviarOFF3">
<input type="hidden" name="enviarOFF3" value="offFoco3">
<button class="off" type="submit" name="foco3" value="0">off</button>
</form>
</div>
<div id="principal">
<h1>Planta Primera</h1>
</div>
<div class="formulario">
<h2>E t c . . .</h2>
</div>
</body>
</html>

Puedes seguir probando en base al ejemplo. No dispongo de más tiempo...
Considero importante que los botones estén dentro de su formulario para evitar errores en los envíos.

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
2
Comentar
sin imagen de perfil
Val: 11
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mostrar divs en una sola fila

Publicado por Lisandro (6 intervenciones) el 01/09/2017 16:36:42
Muchas gracias hermano!!!!!
se ve como quería
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