Как правильно выравнивать элементы div?

Тело моего HTML-документа состоит из 3 элементов, кнопки, формы и холста. Я хочу, чтобы кнопка и форма были выровнены по правому краю, а холст остался выровненным по левому краю. Проблема в том, что когда я пытаюсь выровнять первые два элемента, они больше не следуют друг за другом и вместо этого находятся рядом друг с другом по горизонтали? Вот код, который у меня есть, я хочу, чтобы форма следовала сразу после кнопки справа без пробела между ними.

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

Ответы

Ответ 1

Вы можете создать div, который содержит как форму, так и кнопку, а затем поместите float div вправо, установив float: right;.

Ответ 2

floats в порядке, но проблематично с ie6 и 7.

Я бы предпочел использовать margin-left:auto; margin-right:0; во внутреннем div.

Ответ 3

Старые ответы. Обновление: используйте flexbox, почти все работает во всех браузерах.

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

Ответ 4

Другие ответы на этот вопрос не так хороши, так как float:right может выходить за пределы родительского div (возможно, переполнение: скрытый для родителя) и margin-left: auto, margin-right: 0 для меня не работали в сложных вложенных div (я didn не исследуйте почему).

Я выяснил, что для некоторых элементов text-align: right работает, считая, что это работает, когда элемент и родительские элементы являются как inline или inline-block.

Примечание. Свойство text-align CSS описывает, как встроенный контент, такой как текст, выравнивается в его родительском блочном элементе. text-align не контролирует выравнивание самих элементов блока, а только их встроенное содержимое.

Пример:

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

Здесь JS Fiddle.

Ответ 5

Вы имеете в виду это? http://jsfiddle.net/6PyrK/1

Вы можете добавить атрибуты float:right и clear:both; к форме и кнопке

Ответ 6

Если у вас есть несколько div, которые вы хотите выровнять бок о бок в правом конце родительского div, установите text-align: right; в родительском div.

Ответ 7

Если вам не нужно поддерживать IE9 и ниже, вы можете использовать flexbox для решения этой проблемы: codepen

Также есть несколько ошибок с IE10 и 11 (flexbox поддержка), но они не присутствуют в этом примере

Вы можете вертикально выровнять <button> и <form>, обернув их в контейнер с помощью flex-direction: column. Порядок источников элементов будет порядком, в котором они отображаются сверху вниз, поэтому я их переупорядочил.

Затем вы можете горизонтально выровнять контейнер формы и кнопки с холстом, обернув их в контейнер с помощью flex-direction: row. Опять порядок источников элементов будет порядком, в котором они отображаются слева направо, поэтому я переупорядочил их.

Кроме того, для этого потребуется удалить все правила стиля position и float из кода, связанного в вопросе.

Здесь урезана версия HTML в кодедере, указанном выше.

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

И вот соответствующий CSS

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}

Ответ 8

Вы можете использовать flexbox с flex-grow, чтобы сдвинуть последний элемент вправо.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>

Ответ 9

Вы можете просто использовать padding-left: 60% (например), чтобы выровнять контент по правому краю и одновременно обернуть контент в адаптивный контейнер (в моем случае я использовал navbar), чтобы убедиться, что он работает во всех примерах.

Ответ 10

Для выравнивания вправо:

<div style="float:right">
    </div>

Ответ 11

Если вы используете загрузчик, то:

<div class="pull-right"></div>

Ответ 12

Я знаю, что это старый пост, но не могли бы вы просто использовать <div id=xyz align="right"> для правильного.

Вы можете просто заменить правую слева, в центре и оправдать.

Работает на моем сайте:)