Как я могу получить div, чтобы плавать на дно его контейнера?

Я разместил изображения и вставки в верхней части контейнера, используя float: right (or left) много раз. Недавно я столкнулся с необходимостью поместить элемент div в нижний правый угол другого элемента div с обычным переносом текста, который вы получаете с помощью float (текст, заключенный выше и только влево).

Я думал, что это должно быть относительно легко, даже если у float нет нижнего значения, но я не смог сделать это с помощью ряда методов, и поиск в Интернете не дал ничего, кроме использования абсолютного позиционирования, но это не дать правильное поведение переноса слов.

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

РЕДАКТИРОВАТЬ: Просто записка для тех, кто приходит сюда. Вопрос, указанный выше как дубликат, на самом деле не является дубликатом. Требование обтекания текста вокруг вставляемого элемента делает его совершенно другим. На самом деле, ответ на вопрос, получивший наибольшее количество голосов, проясняет, почему ответ в связанном вопросе является неправильным как ответ на этот вопрос. В любом случае, по-видимому, пока нет общего решения этой проблемы, но некоторые решения, опубликованные здесь и в связанном вопросе, могут работать для конкретных случаев.

Установите родительский div в position: relative, затем внутренний div в ...

position: absolute; 
bottom: 0;

... и там вы идете :)

Способ заставить это работать следующим образом:

• Плавайте ваши элементы слева, как обычно

• Поверните родительский div на 180 градусов, используя

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

  JSfiddle: http://jsfiddle.net/wcneY/

• Теперь поверните все элементы, которые плавают влево (задайте им класс), на 180 градусов, чтобы снова выровнять их. Вуаля! они плавают на дно.

После нескольких дней борьбы с различными техниками я должен сказать, что это кажется невозможным. Даже с использованием JavaScript (что я не хочу делать) это кажется невозможным.

Чтобы уточнить для тех, кто, возможно, не понял - это то, что я ищу: при публикации довольно распространено расположение макета (рисунок, таблица, рисунок и т. Д.) Так, чтобы его нижние линии совпадали с нижней частью последнего строка текста блока (или страницы) с текстом, текущим вокруг вставки естественным образом выше и вправо или влево в зависимости от того, на какой стороне страницы находится вставка. В html / css тривиально использовать стиль с плавающей точкой для выравнивания верхней части вставки с верхней частью блока, но, к моему удивлению, невозможно выровнять нижнюю часть текста и вставку, несмотря на то, что это обычная задача макета ,

Я думаю, мне придется пересмотреть цели дизайна для этого элемента, если у кого-то нет предложения в последнюю минуту.

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

До того, как в дело вступит js, я использую абсолютный позиционный подход, который работает, но позволяет потоку текста отставать Поэтому я переключаюсь в статическое положение, чтобы активировать подход к стойке. (заголовок - родительский элемент, вырез - тот, который я хочу внизу справа, и труба - моя стойка)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

Канал должен идти первым, затем вырез, затем текст в порядке HTML.

Это помещает фиксированный div внизу страницы и фиксирует вниз при прокрутке вниз.

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

Поместите элемент div в другой элемент div и установите для стиля родительского элемента значение « position:relative;Затем» в дочернем элементе div установите следующие свойства CSS:position:absolute; bottom:0;

Если у вас все в порядке только с самой нижней строкой текста, идущей в сторону блока (в отличие от полностью вокруг и под ним, что невозможно сделать без окончания блока и начала нового), это невозможно переместить блок в один из нижних углов родительского блока. Если вы поместили некоторый контент в тег абзаца внутри блока и хотите разместить ссылку в правом нижнем углу блока, поместите ссылку в блок абзаца и установите для нее значение float: right, а затем вставьте тег div с clear : оба установлены под концом тега абзаца. Последний div должен убедиться, что родительский тег окружает плавающие теги.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

Если вы установите родительский элемент как position: относительный, вы можете установить дочерний элемент в нижнее положение установки: absolute; и снизу: 0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>
  

Если вы хотите, чтобы текст был красиво завернут:

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

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

Использовать абсолютную позицию divs советы действительно глупы, потому что вся вещь с плавающей точкой теряет точку с абсолютными позициями.

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

для достижения аналогичного эффекта вы можете сделать это: не делайте div float, а установите его свойство display в inline-block. тогда вы можете выровнять его по вертикали так, как вам удобно. вам просто нужно собственность сНа настроенных родителей vertical-alignлибо top, bottom, middleилиbaseline

я надеюсь, что это поможет кому-то

С введением Flexbox это стало довольно легко без особого взлома. align-self: flex-endна дочернем элементе выровняйте его вдоль поперечной оси .

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Вывод:

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Я уже давно нашел это решение. Вот что я получаю:

выровнять себя: гибкий конец;

ссылка: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Однако я не могу вспомнить, откуда я открыл эту ссылку. Надеюсь, поможет

Я бы просто сделал столик.

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

И CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

Посмотрите это в действии:
http://jsfiddle.net/mLphM/1/

Я попробовал несколько из этих техник, и следующее сработало для меня, поэтому, если все остальное здесь, если все остальное терпит неудачу, попробуйте это, потому что это сработало для меня :)

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

А выбрал этот подход @ dave-kok. Но это работает, только если весь контент подходит без прокрутки. Я ценю, если кто-то улучшит

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

Вот код http://jsfiddle.net/d9t9joh2/

Это теперь возможно с гибкой коробкой. Просто установите 'display' родительского div как 'flex' и установите для свойства 'margin-top' значение 'auto'. Это не искажает любое свойство обоих div.

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

Не уверен, но сценарий, опубликованный ранее, сработал, если вы используете положение: относительное вместо абсолютного в дочернем элементе div.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

И никаких таблиц ...

Если вам нужно относительное выравнивание, а DIV по-прежнему не дают того, что вы хотите, просто используйте таблицы и установите valign = "bottom" в ячейке, чтобы содержимое было выровнено по низу. Я знаю, что это не очень хороший ответ на ваш вопрос, поскольку DIV должны заменять таблицы, но это то, что я недавно сделал с заголовком изображения, и до сих пор он работал безупречно.

Я попробовал этот сценарий, опубликованный ранее также;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Абсолютное позиционирование фиксирует div в нижней части браузера при загрузке страницы, но при прокрутке вниз, если страница длиннее, она не прокручивается вместе с вами. Я изменил позиционирование на относительное, и оно работает идеально. Div загружается прямо на дно при загрузке, так что вы не увидите его, пока не дойдете до дна.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

Один интересный подход заключается в размещении нескольких правильных элементов с плавающей точкой друг над другом.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

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

Ответ Стю до сих пор ближе всего к работе, но он по-прежнему не учитывает тот факт, что высота вашего внешнего элемента может изменяться в зависимости от того, как текст обернут внутри него. Таким образом, перемещение внутреннего элемента div (путем изменения высоты «трубы») только один раз будет недостаточно. Это изменение должно происходить внутри цикла, поэтому вы можете постоянно проверять, достигли ли вы правильного позиционирования, и при необходимости корректировать его.

CSS из предыдущего ответа остается в силе:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

Тем не менее, Javascript должен выглядеть примерно так:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

Я знаю, что это очень старая тема, но все же я хотел бы ответить. Если кто-то следует ниже css & html тогда, это работает. Div нижнего колонтитула будет придерживаться снизу, как клей.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

Использовать margin-topсвойство css с целью установить нижний колонтитул в нижней части его контейнера. И использовать text-align-lastсвойство css, чтобы установить содержимое нижнего колонтитула в центре.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Ох, ребята .... Вот вы

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

Нет абсолютной позиции! Отзывчивый! Старая школа

Довольно старый вопрос, но все же ... Вы можете поместить div в конец страницы следующим образом:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

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

просто ...... в html файле справа .... внизу есть нижний колонтитул (или div, который вы хотите внизу). Так что не делайте этого:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

СДЕЛАЙТЕ ЭТО: (нижний колонтитул внизу.)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

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

это должно работать. для меня.

Я получил это, чтобы работать с первой попытки, добавив position:absolute; bottom:0;к div ID внутри CSS. Я не добавил родительский стиль position:relative;.

Он отлично работает как в Firefox, так и в IE 8, еще не пробовал в IE 7.

альтернативный ответ - разумное использование таблиц и строк. установив для всех ячеек таблицы в предыдущей строке (за исключением одной из основного содержимого) значение rowspan = "2", вы всегда получите одно отверстие в нижней части ячейки основной таблицы, которое вы всегда можете поместить в valign = "bottom".

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

Я перепробовал все ответы div, я не смог заставить их делать то, что мне было нужно.

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

вот мое решение:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

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

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}