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

Я попытался с помощью float, и он работает для выравнивания вправо, но не для выравнивания дна

<div style="border-bottom: 1px solid; padding-bottom:10px;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>

    <div style="
            font-size: small;
            float: right;
            padding: 5px 0px 0px 20px;
            font-style: italic;
            display: inline;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

    <div style="clear:both"></div>

</div>

Вы можете проверить результат в https://jsfiddle.net/j66q82gy/7/

Когда окно узкое, не имеет значения, что оно не выровнено снизу, но когда окно широкое, а h1 и средний div находятся на одной линии, становится очевидно, что оно не выровнено снизу, и мне нужно это быть выровненным снизу.

Мне также нужно держать их в одной строке, поэтому встроенные должны оставаться как в h1, так и в среднем div.

Изменить: Flex помещает вещи в своего рода неловко наполовину, наполовину блок, как это: i.imgur точка com / YA6TdBt.png

Мне нужно что-то похожее на это i.imgur dot com / Awj9Bht.png (верхнее изображение - мой код, нижнее - фотошоп, чтобы выглядеть так, как мне нужно).

2
cooldude101 1 Сен 2017 в 13:54

5 ответов

Лучший ответ

С Flexbox вы можете выровнять как снизу, так и внутреннюю часть div вправо.

Добавьте display: flex; align-items: flex-end к внешнему div, сбросьте поле на h1 (или вы можете добавить один к другому внутреннему div), а затем установите margin-left: auto; на внутренний div

align-items: flex-end сохранит внутреннюю нижнюю часть div выровненной с h1, а margin-left: auto; сместит внутреннюю div вправо.

Обратите внимание, что из-за разного размера шрифта их внутренние метрики создадут несколько больший пробел под h1. Здесь я просто добавил нижний отступ в 4 пикселя на внутреннем div, но вы также можете поиграть с общим line-height


Обновлено на основе комментария

Если оставить текст развернутым, пока он не достигнет ширины своих родителей, добавьте flex-wrap: wrap; к внешнему div

<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my title
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my big title - Bla bla bla   
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my big title - Bla bla bla bla bla bla bla bla bla
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>
4
Ason 1 Сен 2017 в 12:01

Надеюсь, это поможет

<div style="border-bottom: 1px solid; padding-bottom:10px;display: table;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>
    
    <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;
           display: table-cell;
           vertical-align:bottom;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
    <div style="clear:both"></div>

</div>

Способ 2:

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

0
Mohammed Wahed Khan 1 Сен 2017 в 11:22

Это то, что вы предполагали?

<div style="border-bottom: 1px solid; padding-bottom:10px; display:flex; flex-wrap: wrap;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>

    <div style="
            font-size: small;
            float: right;
            padding: 5px 0px 0px 20px;
            font-style: italic;
            align-self: flex-end;
            margin-left: auto;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

    <div style="clear:both"></div>

</div>

https://jsfiddle.net/eq6jLnct/5/

Измените высоту на то, что вам нужно. Или просто используйте минимальную высоту.

Обратите внимание, что flexbox не поддерживается для всех браузеров: http://caniuse.com/#search=flex -Box

0
Peter Matisko 1 Сен 2017 в 12:18

Вы можете использовать flexbox свойства вместо {{X0} } ...

Полностью обновленный ответ

играть на скрипке

.flex {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.flex div {
  margin-left: auto;
}
<div style="border-bottom: 1px solid; padding-bottom:10px;" class="flex">
  <h1>
    This is my big title - Bla bla bla
  </h1>
  <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;">
    Published on Friday 11th August 2017 at 12:46

  </div>
</div>
2
sol 1 Сен 2017 в 11:51

Проверьте этот codePen, который я добавил, вот CSS:

float: right;
transform: translateY(0px);
0
Ivan 1 Сен 2017 в 13:04