css - ¿Cómo alineo correctamente los elementos div?

CorePress2024-01-25 11

El cuerpo de mi documento html consta de 3 elementos, un botón, un formulario y un lienzo. Quiero que el botón y el formulario estén alineados a la derecha y que el lienzo permanezca alineado a la izquierda. El problema es que cuando intento alinear los dos primeros elementos, ¿ya no se suceden entre sí sino que están uno al lado del otro horizontalmente? Aquí está el código que tengo hasta ahora, quiero que el formulario siga directamente después del botón de la derecha. sin espacios intermedios.

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="https://stackoverflow.com/questions/66843032/timeline.js"></script>
  <link rel="stylesheet" href="https://stackoverflow.com/questions/66843032/master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="600" height="600" style="background:lightgray;">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

------------------------------------

Los flotadores están bien, pero son problemáticos con IE 6 y IE. 7. Preferiría usar lo siguiente en el div interno:

margin-left: auto; 
margin-right: 0;

Ver tEl error de doble margen de IE para aclarar por qué.

@ShellNinja ¿por qué? Sé que 0 es válido, pero también lo es 0px... argumenta tu punto para que aprendamos algo.

- pstanton

17/03/2014 a las 9:25

Dejar fuera la unidad permite que el navegador omita estaAlgunos cálculos hacen que esto mejore el rendimiento. Si es cero, ¿por qué desperdiciar los recursos calculando el diseño en función de una unidad? Cero es cero independientemente de la unidad... Uno pensaría que esta lógica ya estaría integrada en los navegadores. enlace

- ShellNinja

18/03/2014 a las 13:27

No puedo estar en desacuerdo, pero dudo que afecte mucho al rendimiento. editar.

- pstanton

19/03/2014 a las 2:03

No puedo hacer que esto funcione, el div aún se alinea a la izquierda. ¿Podrías proporcionar un violín o algunas (más) líneas de html/css?

- Gerrit-K

7 de abril de 2014 a las 6:35

Asegúrate de que tu elemento tenga display: block;

derek_duncan

29 dic 2014 a las 16:59

------------------------------------

Puedes hacer un div que conMantiene tanto la forma como la forma. el botón, luego haga que el div flote hacia la derecha configurando float: right;.

Respondido al

7 de octubre de 2011 a las 21:58

David Tran

10.4k

5 insignias de oro

48 insignias de plata

62 bronce insignias

Nunca pensé queEstaría usando flotador. Probé margin-left: auto; pero eso no funcionó, lo cual me sorprendió porque el elemento que intento alinear a la derecha es relativo.

-DFSFOT

27/02/2019 a las 17:05

@DFSFOT A mí me pasó lo contrario. Se esperaba float:right para trabajar pero margin-left: auto funcionó, gracias.

- Carl Kroeger Ihl

1 de octubre de 2020 a las 22:23

Esto no tuvo efecto en mi caso, el estilo ="margin-left: auto;margin-right: 0;" Aunque lo hice (créditos a @pstanton).

- Andreas L.

19/01/2021 a las 17:52

¿Qué significa "flotar: correcto"? es igual a?

- Muñeco de nieve

18 de marzo de 2022 a las 6:52

@AndreasL. La solución funcionó a las mil maravillas

- Denver Shenal

27 de mayo de 2022 a las 18:16

------------------------------------

Respuestas antiguas. Una actualización: use flexbox, ahora funciona prácticamente en todos los navegadores.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

Y puedes hacerlo aún más elegante, simplemente:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

Y más elegante:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>

Funciona, pero cuando la pantalla se vuelve pequeña en lugar de apilarse, se vuelven muy estrechas

- jean d'arme

22/09/2017 a las 15:37

Debe agregar una consulta de medios para cambiar la dirección flexible de fila a columna en el punto de interrupción que defina. Probablemente querrás cambiar o eliminar tu contenido de justificación en este ejemplo, de lo contrario, las cosas se estirarán hacia arriba y hacia abajo en lugar de hacia izquierda y derecha.

- Michael Busél

22/10/2017 a las 10:21

Funciona para mí, pero también agregué (en el primer ejemplo) un flotante: derecho, para que el párrafo de la derecha no ensucie las líneas de la izquierda.

-Yogurtu

12 de enero de 2022 a las 4:20

Esta debería ser la respuesta aprobada.

-Emir Sürmen

25 de junio de 2022 a las 11:10

------------------------------------

Puedes usar flexbox con flex-grow para empujar el último elemento hacia la derecha.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>

Personalmente creo que esta es la respuesta correcta para 2020 :P

- Mike Kellogg

17 de enero de 2020 a las 2:02

------------------------------------

Tenga en cuenta que si bien esta respuesta no es incorrecta, sí lo es.Metodología muy anticuada escrita en 2015

Otras respuestas a esta pregunta no son tan buenas ya que float:right puede ir fuera de un div principal (overflow: hide for parent a veces puede ayudar) y margin-left: auto, margin-right: 0 para mí no. trabajar en divs anidados complejos (no investigué por qué).

He descubierto que para ciertos elementos text-align: right funciona, asumiendo que esto funciona cuando el elemento y el padre están en línea o en bloque en línea.

Nota: la propiedad CSS text-align describe cómo se alinea el contenido en línea, como el texto, en su elemento de bloque principal. text-align no controla la alineación de los elementos del bloque en sí, solo su contenido en línea.

Un ejemplo:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

Aquí hay un JS Fiddle.

Respondido

28/07/2015 a las 18:03

Mladen Adamovic

3.091

2 insignias de oro

30 insignias de plata

44 insignias de bronce

Esto funcionó para mí para alinear 3 imágenes a la derecha con <br /> etiquetas entre ellos.

- Alex Banman

30/03/2021 a las 14:18

Para ser claros: esto no alinea a la derecha el div en sí. Cada uno de los dos divs secundarios "padre/caption" ocupan todo el ancho de la pantalla, como puede ver configurando su color de fondo. Lo que has hecho es alinear el texto dentro de ellos.

- Lucian Wischik

25/10/2021 a las 16:28

------------------------------------

Si tiene varios divs que desea alinear uno al lado del otro en el extremo derecho del div principal, configure text-align: right; en los padrest div.

------------------------------------

¿Quieres decir así? http://jsfiddle.net/6PyrK/1

Puedes agregar los atributos de float:right y clear:both; al formulario y al botón

Respondido

7 de octubre de 2011 a las 22:00

José Marikle

77,1k

18 insignias de oro

112

112 insignias de plata

129

129 de bronce insignias

------------------------------------

Tal vez solo:

  margin: auto 0 auto auto;

@SoniSol ¿Qué enlace?

- showdev

19 de noviembre de 2020 a las 2:46

------------------------------------

La respuesta simple está aquí:

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>

------------------------------------

A veces, float: left conduce a problemas de diseño, en esos casos puedes usar display flex como este:

.right {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
}

<div>
  <div class="right">Right</div>
</div>

------------------------------------

Una forma podría ser establecer un div principal para aquellos elementos que deben colocarse hacia la derecha (float: right;) y hacer el resto como se muestra en el siguiente ejemplo para alinearlos a la derecha:

.parent-div {
  display: flex;
  float: right;
  background: yellow;
  padding: 10px;
}


/*Below: child-div styling is not needed for this purpose! this is just for demonstration:*/

.child-div {
  text-align: center;
  background-color: powderblue;
  margin: auto 10px;
  height: 100px;
  width: 50px;
}

<div class="">CANVAS div </div>
<div class="parent-div">
  <div class="child-div">child 1</div>
  <div class="child-div">child 2</div>
  <div class="child-div">...</div>
  <div class="child-div">child n</div>
</div>

------------------------------------

Si estás usando bootstrap, entonces:

<div class="pull-right"></div>

Creo que te refieres a <div class="text-right"></div>.

- Alex Barker

12/06/2019 a las 21:19

anil no está equivocado, la clase "pull-right" da como resultado "flotante: derecha;" (probado con Bootstrap 3.4.1)

- Fabián Horlacher

27 de mayo de 2020 a las 16:50

------------------------------------

display: flex;
justify-content: space-between;

no ha sido mencionado. si hay 2 elementos (incluso si uno es un div vacío) colocará uno a la izquierda y otro a la derecha.

<div style="display: flex; justify-content: space-between;">
  <div id="emptyDiv"></div>
  <div>I'm on the right</div>
</div>

Si estoy en lo cierto. También puedes cambiar a justify-content:end; por lo que no necesitarás el elemento vacíoDiv.

- Niels Lucas

21 de marzo de 2022 a las 14:59

Sí, el extremo flexible se indicó en otra respuesta, sin embargo, ninguna respuesta mencionó este método. La ventaja de este método es que si desea agregar más elementos, no afectará la posición de "Estoy a la derecha". div siempre que sea el hijo final de su padre y siempre que haya suficiente espacio en la fila.

- Jevon

23/03/2022 a las 15:23

------------------------------------

Si no tienes que soportar IE9 y versiones inferiores, puedes usar flexbox para resolver esto: codepen

También hay algunos errores con IE10 y 11 (compatibilidad con Flexbox), pero no están presentes en este ejemplo

Puedes alinear verticalmente el <botón> y el <formulario> envolviéndolos en un contenedor con flex-direction: column. El orden de origen de los elementos será el orden en que se muestran de arriba a abajo, así que los reordené.

Luego puedes alinear horizontalmente el formulario y el formulario. contenedor de botones con el lienzo envolviéndolos en un contenedor con flex-dirSección: fila. Nuevamente, el orden de origen de los elementos será el orden en que se muestran de izquierda a derecha, así que los reordené.

Además, esto requeriría que elimines todas las reglas de posición y estilo flotante del código vinculado en la pregunta.

Aquí hay una versión recortada del HTML en el codepen vinculado arriba.

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

Y aquí está el CSS relevante

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}

------------------------------------

Simplemente puede usar padding-left:60% (por ejemplo) para alinear su contenido a la derecha y simultáneamente envolver el contenido en un contenedor responsivo (necesité una barra de navegación en mi caso) para asegurar que funcioneen todos los ejemplos.

------------------------------------

Puedes hacerlo fácilmente simplemente agregando este CSS: (Funciona en IE11)

<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>

Esto no funciona a menos que sepas el ancho exacto de cada elemento que estás alineando a la derecha. Solución extremadamente frágil hasta el punto de resultar impracticable.

-TylerH

7 de abril de 2021 a las 13:44

------------------------------------

Sé que esta es una publicación antigua, pero ¿no podrías usar <div id=xyz align="right"> por la derecha.

Puedes simplemente reemplazar derecha con izquierda, centrar y justificar.

Trabajó en mi sitio :)

Respondido

30 de mayo de 2014 a las 19:20

Dafydd

1 insignia de bronce

No utilice atributos HTML para dar formato a su página. Para eso se creó CSS. De hecho, el atributo align ahora está en desuso.

- Hanna

5 agosto 2014 a las 17:11

...y de ahí el motivo de una pregunta como ésta y la necesidad de responderla, ya que los métodos antiguos notrabajo más largo.

-vapcguy

4 de febrero de 2015 a las 3:52

ohohoh, tantas cosas negativas))

- Nessi

1 de octubre de 2019 a las 4:27

¡Gracias por esta respuesta! Me preguntaba por qué align="right" estaba equivocado y, he aquí, lo mencionaste y alguien proporcionó una sólida respuesta en forma de comentario :)

-Pdeshacerse

12 de septiembre de 2022 a las 1:37

randomThread

julia - Actualizar manualmente los parámetros de capa en Flux r: ordenar nombres en cadenas y resumir los números de pedido bucles: un fantasma en un programa C está cambiando el valor de un elemento de matriz sin una declaración para hacerlo dht - Tabla de enrutamiento de Kadelmia: ¿es necesario el enrutamiento bidireccional?Problemas con Android al escribir y leer LocalDate hacia y desde SharedPreferences leer múltiples archivos csv en R usando bucles Error de función de Flutter Firebase: la respuesta no es un objeto JSON válido crystal lang - Problema al iniciar el servidor Lucky ms access: el comando SQL "ENTRE" genera una discrepancia en el tipo de datos javascript: crea matrices de valores que se cruzan java - Subcadena Regex Match si dicha subcadena contiene otra palabra ¿Cómo puedo crear un programa en Python que genere un comando que imprima un número del 0000 al 9999 en un bucle con 4 letras an

css - ¿Cómo alineo correctamente los elementos div?

Su guía para un futuro mejor - libreflare

Categoría