¿Cómo alineo correctamente los elementos div?

351

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 trato de alinear los dos primeros elementos, ¿ya no se siguen entre sí y, en cambio, 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 a la derecha sin espacio en el medio.

#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="timeline.js"></script>
  <link rel="stylesheet" href="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="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>
Expandir fragmento

css html MEURSAULT
fuente

Respuestas:

338

Puede hacer un div que contenga tanto el formulario como el botón, luego haga que el div flote a la derecha configurando float: right;.

vantrung -cuncon
fuente
Nunca pensé que estaría usando flotador. Lo intenté margin-left: auto;pero no funcionó, lo que me sorprendió porque el elemento que estoy tratando de alinear a la derecha es relativo.
DFSFOT
461

Los flotadores están bien, pero son problemáticos con ie6 y 7.

Preferiría usar margin-left:auto; margin-right:0;en el div interno.

pstanton
fuente
66
@ShellNinja ¿por qué? Sé que 0es válido, sin embargo, también lo es 0px ... argumenta tu punto para que aprendamos algo.
pstanton
29
Dejar de lado la unidad permite al navegador omitir ciertos cálculos al procesar este rendimiento mejorado. Si es cero, ¿por qué desperdiciar los recursos que calculan el diseño en función de una unidad? Cero es cero independientemente de la unidad ... Uno pensaría que esta lógica estaría integrada en los navegadores por ahora. enlace
ShellNinja
77
No puedo estar en desacuerdo, pero dudo que afecte mucho el rendimiento. editar.
pstanton
24
No puedo hacer que esto funcione, el div todavía se alinea a la izquierda. ¿Podría proporcionar un violín o algunas (más) líneas de html / css?
Griddo
21
Asegúrese de que su elemento tienedisplay: block;
derek_duncan
202

Viejas respuestas. 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>
Expandir fragmento

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

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

Y más elegante:

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

Michael Bushe
fuente
44
funciona, pero cuando se pone la pantalla pequeña en lugar de apilamiento que acaba de obtener realmente estrechas
Jean d'arme
66
Debe agregar una consulta de medios para cambiar la dirección flexible de fila a columna en el punto de ruptura que defina. Es probable que desee cambiar o eliminar su contenido de justificación en este ejemplo; de lo contrario, las cosas se estirarán hacia arriba y hacia abajo en lugar de hacia la izquierda y hacia la derecha.
Michael Bushe
Esto funcionó para mí. Las respuestas anteriores no lo hicieron. Usando "brillante".
Roger
30

Otras respuestas para esta pregunta no son tan buenas ya que float:rightpueden salir de un div principal (desbordamiento: oculto para el padre a veces puede ayudar) y margin-left: auto, margin-right: 0para mí no funcionó en divs anidados complejos (no investigué por qué).

He descubierto que para ciertos elementos text-align: rightfunciona, suponiendo que esto funcione cuando el elemento y el padre son ambos inlineo inline-block.

Nota: la text-alignpropiedad CSS describe cómo se alinea el contenido en línea como el texto en su elemento de bloque primario. text-alignno 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 .

Mladen Adamovic
fuente
15

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

Mo Bitar
fuente
15

Puede usar flexboxcon flex-growpara empujar el último elemento hacia la derecha.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
jzilg
fuente
1
Personalmente, creo que esta es la respuesta correcta para 2020: P
Mike Kellogg
2

Si no tiene que soportar IE9 y más abajo, puede usar flexbox para resolver esto: codepen

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

Puede alinear verticalmente el <button>y el <form>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é.

A continuación, puede alinear horizontalmente el contenedor de formularios y botones con el lienzo envolviéndolos en un contenedor con flex-direction: row. 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 quite todo positiony floatreglas de estilo a partir del código relacionado en la pregunta.

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

<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;
}
Bates550
fuente
1

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>
Comunidad Ans
fuente
0

Simplemente puede usar padding-left: 60% (por ej.) Para alinear su contenido a la derecha y envolver simultáneamente el contenido en un contenedor receptivo (en mi caso, necesitaba la barra de navegación) para garantizar que funcione en todos los ejemplos.

Leevansha
fuente
0

Si está utilizando bootstrap, entonces:

<div class="pull-right"></div>
anil shrestha
fuente
Creo que quisiste decir <div class="text-right"></div>.
Alex Barker
1
anil no está mal, la clase "pull-right" da como resultado "float: right;" (probado con Bootstrap 3.4.1)
Fabian Horlacher
-13

Sé que esta es una publicación antigua, pero ¿no podrías usarla? <div id=xyz align="right"> correctamente?

Simplemente puede reemplazar a la derecha con izquierda, centro y justificar.

Trabajó en mi sitio :)

Dafydd
fuente
21
No utilice atributos HTML para formatear su página. Para eso fue hecho CSS. De hecho, el alignatributo ahora está en desuso .
Hanna
44
... y de ahí la razón de una pregunta como esta y la necesidad de que sea respondida, ya que los métodos antiguos ya no funcionan.
vapcguy
ohohoh, mucho negativo))
Nessi