Як змусити діва плисти на дно його контейнера?

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

Я вважав, що це повинно бути досить легко, навіть якщо float не має нижнього значення, але я не зміг це зробити за допомогою ряду методик, а пошук в Інтернеті не придумав нічого іншого, крім використання абсолютного позиціонування, але це не дайте правильну поведінку підгортання слів.

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

EDIT: Просто примітка для кожного, хто заходить сюди. Питання, пов'язане вище як дублікат, насправді не є дублікатом. Вимога, що текст обертається навколо елемента вставки, робить його зовсім іншим. Насправді, відповідь на відповідь, яка проголосує вгорі, дає зрозуміти, чому відповідь у зв’язаному питанні є неправильною як відповідь на це питання. У будь-якому разі, як і раніше, не існує загального рішення цієї проблеми, але деякі рішення, розміщені тут і в пов'язаному питанні, можуть працювати в конкретних випадках.

Встановіть батьківський div на position: relative, а потім внутрішній div на ...

position: absolute; 
bottom: 0;

... і ось ти їдеш :)

Спосіб змусити його працювати:

• Поплавте своїми елементами зліва, як звичайно

• Поверніть батьківський дів на 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 тривіально використовувати стиль float для вирівнювання верхньої частини вставки з вершиною блоку, але, на мій подив, неможливо вирівняти нижню частину тексту та вставки, незважаючи на те, що це звичайна задача компонування. .

Напевно, мені доведеться переглянути цілі дизайну цього предмета, якщо хтось не запропонує в останню хвилину.

Я домігся цього в 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 та встановіть для батьківського стилю div значення position:relative;Далі в дочірній div встановіть такі властивості CSS:position:absolute; bottom:0;

Якщо у вас все гаразд, коли лише нижній рядок тексту йде в сторону блоку (на відміну від повністю навколо і під ним, що не можна зробити, не припиняючи блок і не починаючи новий), це не неможливо перенести блок до одного з нижніх кутів батьківського блоку. Якщо ви помістите деякий вміст у тег абзацу всередині блоку і хочете перенести посилання в нижній правий кут блоку, покладіть посилання в блок абзацу і встановіть його на плавання: праворуч, а потім помістіть у тег div з чітким : обидва встановлені під кінцем тегу абзацу. Останній 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>

Якщо встановити батьківський елемент як позицію: відносну, ви можете встановити дочірнє нижнє положення: абсолютне; і низ: 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>

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

користуватися порадами щодо абсолютного положення справді нерозумно, адже вся плаваюча річ втрачає крапку при абсолютних позиціях ..

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

щоб досягти подібного ефекту, ви можете це зробити: не змушуйте div плавати, а встановлюйте його властивістю відображення 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 '. Це не спотворює жодної властивості обох дів.

.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>

Не впевнений, але сценарій, опублікований раніше, здається, працює, якщо ви використовуєте позицію: відносно замість абсолютного для дочірнього діва.

#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 = "дно" в комірці, яку ви хочете, щоб вміст вирівнювався до низу. Я знаю, що це не чудова відповідь на ваше запитання, оскільки DIV повинні замінити таблиці, але це те, що мені довелося зробити останнім часом із заголовком зображення, і воно досі працює бездоганно.

Я спробував цей сценарій, розміщений і раніше;

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

Абсолютне позиціонування фіксує діву до нижньої частини браузера після завантаження сторінки, але коли ви прокручуєте вниз, якщо сторінка довша, вона не прокручується з вами. Я змінив позиціонування на відносне, і воно працює ідеально. Див йде прямо на дно при навантаженні, тому ви насправді не побачите його, поки не дістанетесь до дна.

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>

Проблема полягає лише в тому, що це працює лише тоді, коли ви знаєте висоту коробки.

Відповідь Стю наближається до роботи досі, але вона все ще не враховує той факт, що висота вашого зовнішнього дива може змінюватися, виходячи з способу загортання тексту всередині нього. Отже, перестановки внутрішнього діва (змінивши висоту «труби») лише одного разу буде недостатньо. Ця зміна має відбуватися всередині циклу, тож ви можете постійно перевіряти, чи досягли ви правильного позиціонування, і, якщо потрібно, відкоригуйте.

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, то це працює. Дитячий нижній колонтитул приклеїться донизу, як клей.

<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{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Ви можете бачити, де відбувається магія. Думаю, ви могли б зробити те ж саме, щоб перенести його на дно батьківського діва.

просто ...... в 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 і мати “бічну панель” плавати ліворуч. тоді "вміст" плавати праворуч, тоді "footer" очистити обидва.

це повинно працювати для мене.

Я отримав це для роботи з першої спроби, додавши position:absolute; bottom:0;до ідентифікатора div всередині CSS. Я не додав батьківського стилю position:relative;.

Він ідеально працює як у Firefox, так і в IE 8, ще не пробував його в IE 7.

Альтернативна відповідь - розумне використання таблиць і рядків. встановивши всі клітинки таблиці в попередньому рядку (крім основного вмісту) на rowspan = "2", ви завжди отримаєте один отвір у комірці в нижній частині головної комірки таблиці, який ви завжди можете поставити valign = "bottom".

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

Я спробував усі відповіді на діви, мені не вдалося змусити їх зробити те, що мені потрібно.

<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 px і плавати його. Потім очистіть елемент, який ви хочете фактично розташувати, і використовуйте висоту порожнього елемента, щоб контролювати, як далеко він йде вниз.

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

.invisible {
float: left;  
}

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