¿Cómo alineo correctamente los elementos div?
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 y en su lugar 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 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>8 answers
Puede crear un div que contenga tanto el formulario como el botón, y luego hacer que el div flote hacia la derecha configurando float: right;.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-05 14:26:30
Los flotadores están bien, pero problemáticos con ie6 & 7.
Preferiría usar margin-left:auto; margin-right:0; en el div interno.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-19 02:03:16
Respuestas antiguas. Una actualización: use flexbox, prácticamente funciona en todos los navegadores ahora.
<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>Y usted puede conseguir 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-27 02:14:18
Otras respuestas para esta pregunta no son tan buenas ya que float:right puede ir fuera de un div padre (desbordamiento: oculto para el padre a veces podría ayudar) y margin-left: auto, margin-right: 0 para mí no funcionó en divs anidados complejos (no investigué por qué).
He descubierto que para ciertos elementos text-align: right funciona, suponiendo que esto funciona cuando el elemento y el padre son ambos inline o inline-block.
Nota: la propiedad CSS text-align describe cómo el contenido en línea como el texto se alinea en su elemento de bloque padre. text-align no controla la alineación de los elementos de 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-09 13:38:16
¿Quieres decir así? http://jsfiddle.net/6PyrK/1
Puede agregar los atributos de float:right y clear:both; al formulario y al botón
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-05 17:19:36
Si tiene varios divs que desea alinear uno al lado del otro en el extremo derecho del div padre, establezca text-align: right; en el div padre.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-24 02:55:32
Si usted no tiene que apoyar IE9 y por debajo de usted puede utilizar flexbox para resolver esto: codepen
También hay algunos errores con IE10 y 11 (soporte 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 el que se muestran de arriba a abajo así que reordenar ellos.
Luego puede alinear horizontalmente el contenedor de formulario y botón con el lienzo envolviéndolos en un contenedor con flex-direction: row. De nuevo el orden de origen de los elementos será el orden en el que se muestran de izquierda a derecha así que reordenar ellos.
También, esto requeriría que elimine todas las reglas de estilo position y float del código vinculado en la pregunta.
Aquí hay una versión recortada del HTML en el codepen enlazado 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-12 01:02:22
Sé que este es un post antiguo, pero no podrías simplemente usar <div id=xyz align="right"> para la derecha.
Simplemente puede reemplazar derecha con izquierda, centro y justificar.
Trabajado en mi sitio:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-30 19:23:32