Як вирівняти цей проміжок праворуч від діва?

151

У мене є такий HTML:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

з цим CSS:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

Якщо ви перевірите цей jsFiddle: http://jsfiddle.net/8JwhZ/

ви бачите, що ім’я та дата скріплені. Чи є спосіб, коли я можу отримати дату, щоб вирівняти праворуч? Я спробував float: right;на другому, але він накручує стиль і висуває дату поза вкладеним дівом

html css

— DaveDev
джерело

2

Чи можете ви змінити HTML?

— Фрогз

3

Якщо ви хочете, щоб щось плавало по відношенню до іншого предмета, плавець повинен бути перед неплавцем. Дата повинна бути перед заголовком і плаваючим правом.

— Джош Ковач

246

Якщо ви можете змінити HTML: http://jsfiddle.net/8JwhZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }

— Фрогз
джерело

CSS спрощений та належним чином чистий: обидва повинні бути додані. Також скрипка містить дуже крихке рішення: jsfiddle.net/8JwhZ/2090

— Risord

9

Або якщо ви хочете, щоб це було в розі (я зробив)

— Марк

51

Робота з поплавцями трохи безладна:

Це, як і багато інших "тривіальних" хитрощів з компонуванням, можна виконати за допомогою flexbox.

   div.container {
     display: flex;
     justify-content: space-between;
   }

У 2017 році я вважаю, що це краще рішення (над плаваючим), якщо вам не потрібно підтримувати застарілі браузери: https://caniuse.com/#feat=flexbox

Перевірте скрипт, як різні float звичаї порівнюють із flexbox ("може містити кілька конкуруючих відповідей"): https://jsfiddle.net/b244s19k/25/ . Якщо вам все-таки потрібно приклеїти флоат, я рекомендував третю версію, звичайно.

— Різорд
джерело

Це я вирішив використовувати, майте на увазі, щоб також встановити float: left;і float: right;в проміжки, що містять елементи, які ви хочете розмістити.

— Ран Лоттем

1

Основне повідомлення цієї відповіді полягає в тому, що "float вважається шкідливим", і ви ніколи не повинні використовувати їх (добре, звичайно, є рідкісні винятки). Тож чи можете ви уточнити, чому ви вважаєте, що це гарна ідея?

— Risord

1

Я вважав, що floatце вимагається у внутрішніх елементах, тому що я вважав, що це визначено у примірному прикладі для них, але для #testDнього це не визначено. Моє ліжко!

— Ран Лоттем

25

Альтернативним рішенням плавців є використання абсолютного позиціонування:

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

Дивіться також загадку .

— Філіп
джерело

5

Це можна зробити, не змінюючи html. http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }

— Керел
джерело

4

Рішення з використанням флексбоксу без justify-content: space-between.

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

Коли ми використовуємо flex:1перший , він займає весь простір, що залишився, і другий рухається праворуч. Загадка з цим рішенням: https://jsfiddle.net/2k1vryn7/

Тут https://jsfiddle.net/7wvx2uLp/3/ ви можете побачити різницю між двома підходами до флешбоксу: flexbox з justify-content: space-betweenта flexbox з flex:1на першому .

— гідро17
джерело