Как выровнять содержимое div снизу? - PullRequest
Новая
       40

Как выровнять содержимое div снизу?

1044 голосов
/ 25 февраля 2009

Скажите, у меня есть следующий код CSS и HTML: 

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

Раздел заголовка имеет фиксированную высоту, но содержимое заголовка может измениться. Я бы хотел, чтобы содержимое заголовка было выровнено по вертикали к нижней части раздела заголовка, поэтому последняя строка текста «прилипает» к нижней части раздела заголовка.

Так что, если есть только одна строка текста, это будет выглядеть так: 

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

А если бы было три строки: 

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

Как это можно сделать в CSS?

Ответы [ 25 ]

3 голосов
/ 07 июня 2016

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

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

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}
3 голосов
/ 01 февраля 2018

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

CSS: 

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML: 

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

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

2 голосов
/ 06 февраля 2015

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

Предположим, что высота ваших данных будет x. Ваш контейнер является относительным, а нижний колонтитул также относительным. Все, что вам нужно сделать, это добавить к вашим данным 

bottom: -webkit-calc(-100% + x);

Ваши данные всегда будут внизу вашего контейнера. Работает, даже если у вас есть контейнер с динамической высотой.

HTML будет таким 

<div class="container">
  <div class="data"></div>
</div>

CSS будет таким 

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Живой пример здесь

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

2 голосов
/ 29 декабря 2017

Вот еще одно решение с использованием flexbox, но без использования flex-end для выравнивания по дну. Идея состоит в том, чтобы установить margin-bottom на h1 на авто , чтобы перенести оставшееся содержимое вниз: 

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

Мы также можем сделать то же самое с margin-top:auto для текста, но в этом случае нам нужно обернуть его внутри div или span: 

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}
<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>
1 голос
/ 23 октября 2017 
#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>


#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}
<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>
1 голос
/ 09 ноября 2016

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

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}
1 голос
/ 22 февраля 2016

Кажется, работает:

HTML: Я внизу

CSS: 

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}
1 голос
/ 12 июля 2014

если бы вы могли установить высоту оберточного div содержимого (# header-content, как показано в ответе другого), вместо всего #header, возможно, вы также можете попробовать этот подход:

HTML 

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS 

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

показать на codepen

0 голосов
/ 11 января 2015

2015 решение 

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

Добро пожаловать

0 голосов
/ 04 января 2013

Кажется, работает: 

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Использование less делает решение головоломок CSS гораздо больше похожим на кодирование, чем на ... Я просто люблю CSS. Это настоящее удовольствие, когда вы можете изменить весь макет (не нарушая его :), просто изменив один параметр.

Страница:
...