Как правильно выровнять 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>
8 208
css html5

8 ответов:

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

180

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

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

306

старые ответы. Обновление: используйте 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>

и fancier:

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

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

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

26

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

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

16

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

6

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

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

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

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

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

вот урезанная версия HTML в связанном codepen выше.

<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;
}
2

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

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

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

-11