Como faço para alinhar os elementos div?
o corpo do meu documento html consiste em 3 elementos, um botão, um formulário e uma tela. Quero que o botão e o formulário estejam alinhados à direita e a tela fique alinhada à esquerda. O problema é que quando eu tento alinhar os dois primeiros elementos, eles já não seguem um ao outro e, em vez disso, estão ao lado um do outro horizontalmente? é o código que tenho até agora, quero que o formulário siga logo a seguir ao botão da direita, sem espaço em entre.
#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
Você pode fazer um div que contenha tanto o formato como o botão, e depois fazer o div flutuar para a direita, definindo float: right;.
Os Carros Alegóricos estão bem, mas problemáticos com o ie6 & 7.
Eu preferia usar {[[0]} no div interior.<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div><div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>E extravagante:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>Outras respostas para esta pergunta não é tão boa pois float:right pode ir para fora de uma div principal (overflow: hidden para o pai, às vezes, pode ajudar) e margin-left: auto, margin-right: 0 para mim não funcionou no complexo divs aninhadas (eu não investigar o por quê).
Descobri que para certos elementos text-align: right funciona, assumindo que isto funciona quando o elemento e o pai são ambos inline ou inline-block.
Nota: a propriedade text-align CSS descreve como o conteúdo em linha como o texto está alinhado no seu elemento-mãe do bloco. text-align não controla o alinhamento dos próprios elementos de bloco, apenas o seu conteúdo em linha.
Um exemplo:
<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>
Pode adicionar os atributos de float:right e clear:both; à forma e ao botão
Se tiver várias divas que deseja alinhadas lado a lado no Extremo Direito do div pai, defina text-align: right; no div pai.
Se não tiver de suportar o IE9 e por baixo pode usar o flexbox para resolver isto: codepen
Também existem alguns bugs com IE10 e 11 ( suporte flexbox ), mas eles não estão presentes neste exemplo
Pode alinhar verticalmente O <button> e o <form> embrulhando-os num contentor com flex-direction: column. A ordem de origem dos elementos será a ordem em que eles são exibidos de cima para baixo, então eu os reordenei.
Você pode então horizontalmente alinhar o contentor do formato & botão com a área de desenho, embrulhando-os num contentor com flex-direction: row. Novamente a ordem fonte dos elementos será a ordem na qual eles são exibidos da esquerda para a direita, então eu os reordenei.
Também, isso exigiria que você removesse todas as regras de estilo position e float do Código ligado na pergunta.
<div id="mainContainer">
<div>
<canvas></canvas>
</div>
<div id="formContainer">
<div id="addEventForm">
<form></form>
</div>
<div id="button">
<button></button>
</div>
</div>
</div>
E aqui está o CSS relevante
#mainContainer {
display: flex;
flex-direction: row;
}
#formContainer {
display: flex;
flex-direction: column;
}
<div id=xyz align="right"> para a direita.
Pode substituir a direita pela esquerda, pelo centro e justificar.
Trabalhei no meu site:]