horizontalmente - posicionar div css
¿Cómo alinear los elementos div? (8)
El cuerpo de mi documento html consta de 3 elementos, un botón, una forma y un lienzo. Quiero que el botón y la forma 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 uno al otro y están uno al lado del otro horizontalmente. He aquí 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>
Las carrozas están bien, pero problemáticas con ie6 y 7.
Preferiría usar margin-left:auto; margin-right:0; margin-left:auto; margin-right:0; en el div interior
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 puede ayudar) y margin-left: auto, margin-right: 0 para mí no funcionó en conjunto Divs anidados (no he investigado por qué).
Me he dado cuenta de que para ciertos elementos text-align: right funciona, asumiendo que esto funciona cuando el elemento y el elemento principal están en inline o en inline-block .
Nota: la propiedad CSS de text-align describe cómo el contenido en línea como el texto se alinea 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>
Puede hacer un div que contenga tanto el formulario como el botón, luego hacer que el div flote a la derecha estableciendo float: right; .
Quieres decir así? http://jsfiddle.net/6PyrK/1
Puedes agregar los atributos de float:right y clear:both; a la forma y botón
Sé que esta es una publicación antigua, pero no podrías simplemente usar <div id=xyz align="right"> para la derecha.
Simplemente puede reemplazar a la derecha con la izquierda, centro y justificar.
Trabajó en mi sitio :)
Si no tiene que ser compatible con IE9 y más abajo puede 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
Puede alinear verticalmente el <button> y la <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 los reordené.
Luego, puede alinear horizontalmente el contenedor de formulario y botón 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, por lo que los reordené.
Además, esto requeriría que elimines todas las reglas de estilo de 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;
}
Si tiene varios divs que desea alinear uno al lado del otro en el extremo derecho del div principal, configure text-align: right; en el div padre
Viejas respuestas 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 puedes ser 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>