Alinear divs en la misma línea [duplicado] -- html campo con css camp Relacionados El problema

Align Divs on Same Line [duplicate]


1
vote

problema

Español
Esta pregunta ya tiene respuestas aquí :
Dos divs lado a lado - Pantalla fluida (8 respuestas)
cerrado 1 año hace .

Tengo dos elementos div, y quiero alinearlos en la misma línea. He intentado todo o menos todo, y todavía están uno debajo.

Mi código es el siguiente

  body {    background-color: #1b1b1b;    padding-left: 4%;    font-family: Helvetica;  }    h1 {    font-size: 40px;    color: white;  }    .important {    color: #5a92f0;  }    .left-side {    float: left;    display: inline-block;    margin: 10px;    padding-right: 50%;  }    .signup {    float: right;    background-color: white;    padding-left: 5%;    padding-right: 5%;    border-radius: 5px;    border: 1px solid white;    text-align: center;    display: inline-block;    margin: 10px;  }    .signup p {    font-size: 12px;  }    .signup h3 {    font-size: 17px;  }    .signup a {    color: #383737;  }    input[type=text],  select {    width: 100%;    padding: 12px 20px;    margin: 8px 0;    display: inline-block;    border: 1px solid #000;    border-radius: 4px;    box-sizing: border-box;  }    input[type=submit] {    width: 100%;    background-color: #5a92f0;    color: white;    padding: 14px 20px;    margin: 8px 0;    border: none;    border-radius: 4px;    cursor: pointer;  }  
  <div>    <div class="left-side">      <h1> Lorem ipsum dolor sit. <span class="important">Lorem ipsum dolor sit.</span></h1>    </div>    <div class="signup">      <h2> Lorem ipsum dolor sit </h2>      <h3> Lorem ipsum dolor sit amet </h3>      <input id="email" name="emailaddress" placeholder="user@example.com" type="text">      <p>Lorem ipsum dolor sit amet, <a href="/terms">consectetur</a> adipiscing <a href="/privacy">elit sed</a>. </p>      <input value="Submit" type="submit">      <p>Lorem ipsum dolor? <a href="">Lorem ipsum</a></p>    </div>  </div>  

Lo que sucede es un DIV que se muestra arriba, y el otro div se muestra centrado debajo del primer div. Los quiero en el lado opuesto de cada uno.

Original en ingles

I have two div elements, and I want to align them on the same line. I've tried more or less everything, and they are still under eachother.

My code is as follows

body {    background-color: #1b1b1b;    padding-left: 4%;    font-family: Helvetica;  }    h1 {    font-size: 40px;    color: white;  }    .important {    color: #5a92f0;  }    .left-side {    float: left;    display: inline-block;    margin: 10px;    padding-right: 50%;  }    .signup {    float: right;    background-color: white;    padding-left: 5%;    padding-right: 5%;    border-radius: 5px;    border: 1px solid white;    text-align: center;    display: inline-block;    margin: 10px;  }    .signup p {    font-size: 12px;  }    .signup h3 {    font-size: 17px;  }    .signup a {    color: #383737;  }    input[type=text],  select {    width: 100%;    padding: 12px 20px;    margin: 8px 0;    display: inline-block;    border: 1px solid #000;    border-radius: 4px;    box-sizing: border-box;  }    input[type=submit] {    width: 100%;    background-color: #5a92f0;    color: white;    padding: 14px 20px;    margin: 8px 0;    border: none;    border-radius: 4px;    cursor: pointer;  }
<div>    <div class="left-side">      <h1> Lorem ipsum dolor sit. <span class="important">Lorem ipsum dolor sit.</span></h1>    </div>    <div class="signup">      <h2> Lorem ipsum dolor sit </h2>      <h3> Lorem ipsum dolor sit amet </h3>      <input id="email" name="emailaddress" placeholder="user@example.com" type="text">      <p>Lorem ipsum dolor sit amet, <a href="/terms">consectetur</a> adipiscing <a href="/privacy">elit sed</a>. </p>      <input value="Submit" type="submit">      <p>Lorem ipsum dolor? <a href="">Lorem ipsum</a></p>    </div>  </div>

What happens is one div shows up above, and the other div shows up centered below the first div. I want them on the opposite side of eachother.

     

Lista de respuestas

4
 
vote
vote
La mejor respuesta
 

Sugeriría buscar en FlexBox que puede ayudar con problemas de alineación y es un buen reemplazo para los flotadores. He establecido el cuerpo para mostrar: Flex, y los divos izquierdo y derecho para flexionar: 1.

Esto debería funcionar:

  <style>    body {      background-color: #1b1b1b;      padding-left: 4%;      font-family: Helvetica;      display: flex;      align-items: center;    }        h1 {      font-size: 40px;      color: white;    }        .important {      color: #5a92f0;    }        .left-side {      flex: 1;      display: inline-block;      margin: 10px;      padding-right: 10%;    }        .signup {      flex: 1;      background-color: white;      padding-left: 5%;      padding-right: 5%;      border-radius: 5px;      border: 1px solid white;      text-align: center;      display: inline-block;      margin: 10px;    }        .signup p {      font-size: 12px;    }        .signup h3 {      font-size: 17px;    }        .signup a {      color: #383737;    }        input[type=text],    select {      width: 100%;      padding: 12px 20px;      margin: 8px 0;      display: inline-block;      border: 1px solid #000;      border-radius: 4px;      box-sizing: border-box;    }        input[type=submit] {      width: 100%;      background-color: #5a92f0;      color: white;      padding: 14px 20px;      margin: 8px 0;      border: none;      border-radius: 4px;      cursor: pointer;    }  </style>  <div class="left-side">    <h1> Lorem ipsum dolor sit. <span class="important">Lorem ipsum dolor sit.</span></h1>  </div>  <div class="signup">    <h2> Lorem ipsum dolor sit </h2>    <h3> Lorem ipsum dolor sit amet </h3>    <input id="email" name="emailaddress" placeholder="user@example.com" type="text">    <p>Lorem ipsum dolor sit amet, <a href="/terms">consectetur</a> adipiscing <a href="/privacy">elit sed</a>. </p>    <input value="Submit" type="submit">    <p>Lorem ipsum dolor? <a href="">Lorem ipsum</a></p>  </div>  
 

I'd suggest looking into flexbox which can help with alignment issues and is a good replacement for floats. I've set the body to display: flex, and the left and right divs to flex: 1.

This should work:

<style>    body {      background-color: #1b1b1b;      padding-left: 4%;      font-family: Helvetica;      display: flex;      align-items: center;    }        h1 {      font-size: 40px;      color: white;    }        .important {      color: #5a92f0;    }        .left-side {      flex: 1;      display: inline-block;      margin: 10px;      padding-right: 10%;    }        .signup {      flex: 1;      background-color: white;      padding-left: 5%;      padding-right: 5%;      border-radius: 5px;      border: 1px solid white;      text-align: center;      display: inline-block;      margin: 10px;    }        .signup p {      font-size: 12px;    }        .signup h3 {      font-size: 17px;    }        .signup a {      color: #383737;    }        input[type=text],    select {      width: 100%;      padding: 12px 20px;      margin: 8px 0;      display: inline-block;      border: 1px solid #000;      border-radius: 4px;      box-sizing: border-box;    }        input[type=submit] {      width: 100%;      background-color: #5a92f0;      color: white;      padding: 14px 20px;      margin: 8px 0;      border: none;      border-radius: 4px;      cursor: pointer;    }  </style>  <div class="left-side">    <h1> Lorem ipsum dolor sit. <span class="important">Lorem ipsum dolor sit.</span></h1>  </div>  <div class="signup">    <h2> Lorem ipsum dolor sit </h2>    <h3> Lorem ipsum dolor sit amet </h3>    <input id="email" name="emailaddress" placeholder="user@example.com" type="text">    <p>Lorem ipsum dolor sit amet, <a href="/terms">consectetur</a> adipiscing <a href="/privacy">elit sed</a>. </p>    <input value="Submit" type="submit">    <p>Lorem ipsum dolor? <a href="">Lorem ipsum</a></p>  </div>
 
 

Relacionados problema

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos