CSS - Alineación horizontal a la misma altura

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

Alineación horizontal a la misma altura

Publicado por Brouse (2 intervenciones) el 13/01/2019 16:34:04
Hola tengo un pequeño problema a la hora de alinear un texto. Quierero que el primer div (el login) se alinee a la izquierda y el otro div (un iframe de facebook) a la derecha pero que los dos esten al mismo nivel. Alguien me podria ayudar?

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
<form id="login_form" class="form-signin" style="margin-left: 15px; width: 100%;" method="post">
    <div>
    <h3 class="form-signin-heading"><i class="icon-lock"></i> Iniciar Sesi&#243;n</h3>
    <input type="text" class="input-block-level" id="usernmae" name="username" placeholder="Usuario" required>
    <input type="password" class="input-block-level" id="password" name="password" placeholder="Contrase&#241;a" required>
    <button data-placement="top" title="Click para iniciar sesion" id="login1" name="login" class="btn btn-success" type="submit"><i class="icon-signin icon-large"></i> Entrar</button>
          <script type="text/javascript">
            $(document).ready(function(){
              $('#login1').tooltip('show');
              $('#login1').tooltip('hide');
            });
          </script>
    </div>
    <div>
    <h3 class="form-signin-heading"><i class="icon-lock"></i> Iniciar Sesi&#243;n</h3>
    <input type="text" class="input-block-level" id="usernmae" name="username" placeholder="Usuario" required>
    <input type="password" class="input-block-level" id="password" name="password" placeholder="Contrase&#241;a" required>
    <button data-placement="top" title="Click para iniciar sesion" id="login1" name="login" class="btn btn-success" type="submit"><i class="icon-signin icon-large"></i> Entrar</button>
          <script type="text/javascript">
            $(document).ready(function(){
              $('#login1').tooltip('show');
              $('#login1').tooltip('hide');
            });
          </script>
    </div>
</form>
 
 
<div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v3.2&appId=1690522941047352&autoLogAppEvents=1';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div style="" class="fb-page" data-href="https://www.facebook.com/dbcminecraft/" data-tabs="timeline" data-height="430" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/dbcminecraft/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/dbcminecraft/">DragonBall Creative Minecraft</a></blockquote></div>
 
</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 Xavi
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Alineación horizontal a la misma altura

Publicado por Xavi (33 intervenciones) el 14/01/2019 07:55:07
Hola Brouse, una manera muy simple, es poner los dos elementos en dos <div> flotantes, de esta manera, te quedara uno al lado del otro.

Luego, el problema que tendras para que queden completamente alineados, es el H3, que tiene un margen, el cual tendras que quitarlo... aquí te muestro el código con las modificacines.

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
<div style="float:left">
    <form id="login_form" class="form-signin" style="margin-left: 15px; width: 100%;" method="post">
        <div>
        <h3 class="form-signin-heading" style="margin-top:0"><i class="icon-lock"></i> Iniciar Sesi&#243;n</h3>
        <input type="text" class="input-block-level" id="usernmae" name="username" placeholder="Usuario" required>
        <input type="password" class="input-block-level" id="password" name="password" placeholder="Contrase&#241;a" required>
        <button data-placement="top" title="Click para iniciar sesion" id="login1" name="login" class="btn btn-success" type="submit"><i class="icon-signin icon-large"></i> Entrar</button>
              <script type="text/javascript">
                $(document).ready(function(){
                  $('#login1').tooltip('show');
                  $('#login1').tooltip('hide');
                });
              </script>
        </div>
        <div>
        <h3 class="form-signin-heading"><i class="icon-lock"></i> Iniciar Sesi&#243;n</h3>
        <input type="text" class="input-block-level" id="usernmae" name="username" placeholder="Usuario" required>
        <input type="password" class="input-block-level" id="password" name="password" placeholder="Contrase&#241;a" required>
        <button data-placement="top" title="Click para iniciar sesion" id="login1" name="login" class="btn btn-success" type="submit"><i class="icon-signin icon-large"></i> Entrar</button>
              <script type="text/javascript">
                $(document).ready(function(){
                  $('#login1').tooltip('show');
                  $('#login1').tooltip('hide');
                });
              </script>
        </div>
    </form>
</div>
 
<div style="float:left">
    <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = 'https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v3.2&appId=1690522941047352&autoLogAppEvents=1';
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div style="" class="fb-page" data-href="https://www.facebook.com/dbcminecraft/" data-tabs="timeline" data-height="430" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/dbcminecraft/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/dbcminecraft/">DragonBall Creative Minecraft</a></blockquote></div>
 
    </div>
</div>
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
sin imagen de perfil
Val: 3
Ha aumentado su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

Alineación horizontal a la misma altura

Publicado por Brouse (2 intervenciones) el 17/01/2019 17:37:22
Muchas gracias
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