Como alinhar corretamente os elementos div?

351

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 é quando tento alinhar os dois primeiros elementos, eles não se seguem e ficam próximos um do outro na horizontal ?, aqui está o código que tenho até agora, quero que o formulário siga diretamente após o botão à direita sem espaço no meio.

#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 snippet

css html MEURSAULT
fonte

Respostas:

338

Você pode criar uma div que contenha a forma e o botão e, em seguida, faça a div flutuar para a direita, definindo float: right;.

vantrung -cuncon
fonte
Nunca pensei que eu estaria usando float. Eu tentei, margin-left: auto;mas isso não funcionou, o que me surpreendeu porque o elemento que estou tentando alinhar à direita é relativo.
DFSFOT 27/02/19
461

os flutuadores estão ok, mas problemáticos com ie6 e 7.

eu preferiria usar margin-left:auto; margin-right:0;na div interna.

pstanton
fonte
6
@ShellNinja why? Eu sei que 0é válido, no entanto, também é 0px ... discuta seu ponto, então aprendemos algo.
pstanton
29
Deixar a unidade de fora permite que o navegador pule certos cálculos para tornar esse desempenho melhorado. Se for zero, por que desperdiçar os recursos que computam o layout com base em uma unidade? Zero é zero, independentemente da unidade ... Alguém poderia pensar que essa lógica estaria embutida nos navegadores agora. link
ShellNinja 18/03/2014
7
Não posso discordar, mas duvido que isso afete muito o desempenho. editar.
pstanton
24
Não consigo fazer isso funcionar, a div ainda está alinhada à esquerda. Você poderia fornecer um violino ou algumas (mais) linhas de html / css?
Griddo
21
Certifique-se de que seu elemento tenha #display: block;
derek_duncan
202

Respostas antigas. Uma atualização: use flexbox, funciona praticamente em todos os navegadores agora.

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

E você pode ficar ainda mais sofisticado, simplesmente:

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

E mais extravagante:

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

Michael Bushe
fonte
4
ele funciona, mas quando a tela fica pequena em vez de empilhar eles simplesmente ficar realmente estreitar
jean d'arme
6
Você precisa adicionar uma consulta de mídia para alterar a direção flexível de linha para coluna no ponto de interrupção definido. Você provavelmente desejará alterar ou remover seu conteúdo justificado neste exemplo, caso contrário, as coisas se estenderão para cima e para baixo em vez de esquerda e direita.
quer
Isso funcionou para mim. Respostas anteriores não. Usando "brilhante".
Roger
30

Outras respostas para esta pergunta não são tão boas, pois float:rightpodem sair de uma div pai (estouro: oculto para pai às vezes pode ajudar) e, margin-left: auto, margin-right: 0para mim, não funcionou em divs aninhadas complexas (não investiguei o porquê).

Eu descobri que, para certos elementos text-align: right, funciona, assumindo que isso funcione quando o elemento e o pai forem ambos inlineou inline-block.

Nota: a text-alignpropriedade CSS descreve como o conteúdo embutido, como texto, é alinhado em seu elemento de bloco pai. text-alignnão controla o alinhamento dos próprios elementos do bloco, apenas seu conteúdo embutido.

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>

Aqui está um JS Fiddle .

Mladen Adamovic
fonte
17

Você quer dizer assim? http://jsfiddle.net/6PyrK/1

Você pode adicionar os atributos de float:righte clear:both;ao formulário e botão

Joseph Marikle
fonte
15

Se você tem várias divs que deseja alinhar lado a lado na extremidade direita da div principal, defina text-align: right;a div principal.

Mo Bitar
fonte
14

Você pode usar flexboxcom flex-growpara empurrar o último elemento para a direita.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
jzilg
fonte
11
Pessoalmente, acho que essa é a resposta correta para 2020: P
Mike Kellogg
2

Se você não precisa oferecer suporte ao IE9 e abaixo, pode usar o flexbox para resolver isso: codepen

Há também alguns bugs no IE10 e 11 ( suporte à flexbox ), mas eles não estão presentes neste exemplo

É possível alinhar verticalmente a <button>ea <form>enrolando-os em um recipiente 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.

Em seguida, você pode alinhar horizontalmente o contêiner de formulários e botões com a tela, envolvendo-os em um contêiner flex-direction: row. Novamente, a ordem de origem dos elementos será a ordem em que eles são exibidos da esquerda para a direita, então eu os reordenei.

Além disso, isso exigiria a remoção de todas positione floatregras de estilo do código vinculado na pergunta.

Aqui está uma versão reduzida do HTML no código de código acima.

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

Resposta simples está aqui:

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

Você pode simplesmente usar o preenchimento à esquerda: 60% (por exemplo) para alinhar seu conteúdo à direita e envolver simultaneamente o conteúdo em um contêiner responsivo (exigi a barra de navegação no meu caso) para garantir que funcione em todos os exemplos.

Leevansha
fonte
0

Se você estiver usando o bootstrap, então:

<div class="pull-right"></div>
anil shrestha
fonte
Eu acho que você quis dizer <div class="text-right"></div>.
Alex Barker
11
anil não está errado, a classe "pull-right" resulta em "float: right;" (testado com o Bootstrap 3.4.1)
Fabian Horlacher
-13

Eu sei que este é um post antigo, mas você não pode usar apenas <div id=xyz align="right">para a direita.

Você pode simplesmente substituir a direita por esquerda, centro e justificar.

Trabalhei no meu site :)

Dafydd
fonte
21
Por favor, não use atributos HTML para formatar sua página. Foi para isso que o CSS foi criado. De fato, o alignatributo agora está obsoleto .
Hanna
4
... e, portanto, o motivo de uma pergunta como essa e a necessidade de ser respondida, pois os métodos antigos não funcionam mais.
vapcguy
ohohoh, muito negativo))
Nessi