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

352

Тело моего 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>

Развернуть фрагмент

css html Мерсо
источник

338

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

Вантрунг-Кункон
источник

Никогда не думал, что буду использовать поплавок. Я пытался, margin-left: auto;но это не сработало, что меня удивило, потому что элемент, который я пытаюсь выровнять вправо, относителен.

DFSFOT

464

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

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

pstanton
источник

6

@ShellNinja почему? Я знаю, что 0это действительно так, но так же, как и 0px ... аргументируй свою точку зрения, чтобы мы кое-что узнали.

pstanton

29

Выход из блока позволяет браузеру пропускать определенные вычисления для повышения производительности. Если это ноль, зачем тратить ресурсы на компоновку макета на основе единицы? Ноль - это ноль независимо от единицы ... Казалось бы, эта логика уже встроена в браузеры. ссылка

ShellNinja

7

не могу не согласиться, но я сомневаюсь, что это сильно влияет на производительность. редактировать.

pstanton

24

Я не могу заставить это работать, div все еще выравнивается по левому краю. Не могли бы вы предоставить скрипку или несколько (больше) строк html / css?

Griddo

21

Убедитесь, что ваш элемент имеетdisplay: block;

derek_duncan

203

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

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

Развернуть фрагмент

И любитель:

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

Развернуть фрагмент

Майкл Буш
источник

4

он работает, но когда экран становится небольшим вместо укладки они просто получить действительно узкие

Jean d'кавалерия

6

Вам необходимо добавить медиазапрос, чтобы изменить направление флексинга от строки к столбцу в определенной вами точке разрыва. Вы, вероятно, захотите изменить или удалить свой justify-контент в этом примере, иначе все будет растягиваться вверх и вниз, а не влево и вправо.

Майкл

Это сработало для меня. Предыдущих ответов не было. Используя «блестящий».

Роджер

30

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

Я выяснил, что для определенных элементов 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 .

Младен Адамович
источник

17

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

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

Джозеф Марикл
источник

16

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

Мо Битар
источник

15

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

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

jzilg
источник

1

Я лично чувствую, что это правильный ответ на 2020 год: P

Майк Келлогг

2

Если вам не нужна поддержка 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;
}

Bates550
источник

1

Простой ответ здесь:

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

Сообщество Ans
источник

0

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

Leevansha
источник

0

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

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

Anil Shrestha
источник

Я думаю, что вы имели в виду <div class="text-right"></div>.

Алекс Баркер

1

anil не ошибается, класс "pull-right" приводит к "float: right;" (протестировано с Bootstrap 3.4.1)

Фабиан Хорлахер

-13

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

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

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

Давит
источник

21

Пожалуйста, не используйте атрибуты HTML для форматирования вашей страницы. Для этого и создан CSS. Фактически, alignатрибут теперь устарел .

Ханна

4

... и, следовательно, причина такого вопроса и необходимость ответа на него, поскольку старые методы больше не работают.

vapcguy

ооохо, столько негатива))

Несси

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

Ответы: