Jak uzyskać div, aby unosił się na dnie kontenera?

Przesuwałem obrazy i wstawki w górnej części kontenera za pomocą float: prawo (lub lewo) wiele razy. Ostatnio natrafiłem na potrzebę przeniesienia div w prawym dolnym rogu innego div z normalnym zawijaniem tekstu, który otrzymujesz z float (tekst zawijany powyżej i tylko z lewej strony).

Pomyślałem, że to musi być stosunkowo łatwe, mimo że liczba zmiennoprzecinkowa nie ma dolnej wartości, ale nie byłem w stanie tego zrobić za pomocą wielu technik, a wyszukiwanie w sieci nie wymyśliło nic innego niż użycie absolutnego pozycjonowania, ale to nie podać prawidłowe zawijanie wyrazów.

Myślałem, że będzie to bardzo powszechny projekt, ale najwyraźniej tak nie jest. Jeśli nikt nie ma sugestii, będę musiał podzielić mój tekst na osobne pola i wyrównać div ręcznie, ale jest to raczej niepewne i nie chciałbym robić tego na każdej stronie, która tego potrzebuje.

EDYCJA: Tylko uwaga dla każdego, kto tu przyjdzie. Pytanie połączone powyżej jako duplikat nie jest w rzeczywistości duplikatem. Wymóg zawijania tekstu wokół elementu wstawki czyni go zupełnie innym. W rzeczywistości odpowiedź na najczęściej głosowaną odpowiedź tutaj wyjaśnia, dlaczego odpowiedź na powiązane pytanie jest błędna jako odpowiedź na to pytanie. W każdym razie nadal nie wydaje się, aby istniało ogólne rozwiązanie tego problemu, ale niektóre rozwiązania zamieszczone tutaj i w powiązanym pytaniu mogą działać w określonych przypadkach.

Ustaw div rodzica na position: relative, a następnie div wewnętrzny na ...

position: absolute; 
bottom: 0;

... i proszę bardzo :)

Oto sposób na to, aby działał:

• Unieś swoje elementy jak zwykle

• Obróć macierzystą div o 180 stopni za pomocą

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

• Teraz obróć wszystkie elementy, które unoszą się w lewo (nadaj im klasę) o 180 stopni, aby ponownie je wyprostować. Voila! unoszą się na dno.

Po kilku dniach zmagania się z różnymi technikami muszę powiedzieć, że wydaje się to niemożliwe. Nawet używając javascript (czego nie chcę robić) nie wydaje się to możliwe.

Wyjaśnienia dla tych, którzy mogli nie rozumieć - tego właśnie szukam: podczas publikowania dość często układa się wstawkę (obraz, tabelę, rysunek itp.), Aby jej dolne linie były wyrównane do dolnej ostatniej wiersz tekstu bloku (lub strony) z tekstem przepływającym wokół wstawki w naturalny sposób powyżej oraz w prawo lub w lewo, w zależności od strony, na której wstawka jest włączona. W html / css użycie stylu pływakowego do wyrównywania górnej krawędzi wstawki z górą bloku jest trywialne, ale ku mojemu zaskoczeniu wydaje się niemożliwe wyrównywanie dolnej części tekstu i wstawki, mimo że jest to typowe zadanie układu .

Chyba będę musiał powtórzyć cele projektowe dla tego przedmiotu, chyba że ktoś zaproponuje coś w ostatniej chwili.

Osiągnąłem to w JQuery, umieszczając element rozpórki o zerowej szerokości powyżej pływaka w prawo, a następnie zmieniając rozmiar rozpórki (lub rury) zgodnie z wysokością rodzica pomniejszoną o wysokość pływającego dziecka.

Przed uruchomieniem js używam bezwzględnego podejścia do pozycji, które działa, ale umożliwia przepływ tekstu z tyłu. Dlatego przełączam się na pozycję statyczną, aby umożliwić podejście rozpórki. (nagłówek jest elementem nadrzędnym, wycięcie jest tym, którego chcę u dołu po prawej, a rura to moja kolumna)

$("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

}

Rura musi zająć 1. miejsce, następnie wycięcie, a następnie tekst w kolejności HTML.

Spowoduje to umieszczenie stałej div na dole strony i poprawki na dole podczas przewijania w dół

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

Umieść div w innym div i ustaw styl div rodzica na position:relative;Następnie na div div ustaw następujące właściwości CSS:position:absolute; bottom:0;

Jeśli nie masz nic przeciwko temu, że dolna linia tekstu znajduje się z boku bloku (w przeciwieństwie do całkowicie dookoła i pod nim, co nie jest możliwe bez zakończenia bloku i rozpoczęcia nowego), nie jest niemożliwe przeniesienie bloku do jednego z dolnych rogów bloku rodzica. Jeśli umieścisz część treści w tagu akapitu w bloku i chcesz przenieść link do prawego dolnego rogu bloku, umieść link w bloku akapitu i ustaw go jako pływający: w prawo, a następnie wstaw tag div z czystym : oba ustawione tuż pod końcem znacznika akapitu. Ostatnim divem jest upewnienie się, że znacznik nadrzędny otacza zmienne.

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

Jeśli ustawisz element nadrzędny jako pozycję: względną, możesz ustawić dziecko na dolną pozycję ustawienia: absolutną; i na dole: 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>
  

Jeśli chcesz, aby tekst ładnie się zawijał: -

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

Wiem, że te rzeczy są stare, ale ostatnio napotkałem ten problem.

skorzystaj z porady absolutnej pozycji divs jest naprawdę głupie, ponieważ cała rzecz typu float traci punkt z pozycjami absolutnymi.

teraz nie znalazłem uniwersalnego rozwiązania, ale w wielu przypadkach prople używam pływających div, aby wyświetlić coś z rzędu, jak szereg elementów rozpiętości. i nie można tego wyrównać w pionie.

Aby osiągnąć podobny efekt, możesz to zrobić: nie ustawiaj div jako float, ale ustaw jego właściwość display na inline-block. wtedy możesz wyrównać go w pionie, jakkolwiek ci się podoba. wystarczy własności div określonym profilu rodzica vertical-alignalbo top, bottom, middlelubbaseline

mam nadzieję, że to komuś pomoże

Wraz z wprowadzeniem Flexboksa stało się to dość łatwe bez większego hakowania. align-self: flex-endna elemencie potomnym wyrówna go wzdłuż osi poprzecznej .

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

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

Wynik:

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

Znalazłem to rozwiązanie również od dłuższego czasu. Oto co otrzymuję:

align-self: flex-end;

link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Nie pamiętam jednak, skąd otworzyłem ten link. Mam nadzieję, że to pomoże

Zrobiłbym tylko stół.

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

A CSS:

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

Zobacz to w akcji:
http://jsfiddle.net/mLphM/1/

Wypróbowałem kilka z tych technik, a następujące działały dla mnie, więc jeśli wszystko inne tutaj, jeśli wszystko inne zawiedzie, spróbuj tego, ponieważ zadziałało dla mnie :).

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

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

Wybrałem takie podejście @ dave-kok. Ale działa tylko wtedy, gdy cała zawartość pasuje bez przewijania. Doceniam, czy ktoś poprawi się

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

Oto kod http://jsfiddle.net/d9t9joh2/

Jest to teraz możliwe dzięki Flex Box. Wystarczy ustawić „display” div div jako „flex” i ustawić właściwość „margin-top” na „auto”. Nie zniekształca to żadnej własności obu 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>

Nie jestem pewien, ale scenariusz opublikowany wcześniej wydawał się działać, jeśli użyjesz position: krewny zamiast absolutnego na 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>

I żadnych stołów ...!

Jeśli potrzebujesz względnego wyrównania, a DIV nadal nie dają ci tego, czego chcesz, po prostu użyj tabel i ustaw valign = "bottom" w komórce, w której chcesz dopasować zawartość do dołu. Wiem, że nie jest to świetna odpowiedź na twoje pytanie, ponieważ DIV mają zastąpić tabele, ale to właśnie zrobiłem ostatnio z podpisem obrazu i jak dotąd działało bezbłędnie.

Próbowałem również tego scenariusza opublikowanego wcześniej;

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

Pozycjonowanie absolutne naprawia div do najniższej części przeglądarki po załadowaniu strony, ale kiedy przewijasz w dół, jeśli strona jest dłuższa, nie przewija się wraz z tobą. Zmieniłem położenie, aby było względne i działa idealnie. Div przechodzi prosto na dół po załadowaniu, więc nie zobaczysz go, dopóki nie zejdziesz na dół.

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

Jednym z ciekawych podejść jest ułożenie kilku prawych elementów pływających jeden na drugim.

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

Jedynym problemem jest to, że działa to tylko wtedy, gdy znasz wysokość pudełka.

Odpowiedź Stu jest najbliższa dotychczasowej pracy, ale nadal nie bierze pod uwagę faktu, że wysokość twojego zewnętrznego div może się zmieniać, w zależności od sposobu, w jaki tekst się w nim zawija. Zatem zmiana położenia wewnętrznego div (poprzez zmianę wysokości „rury”) tylko raz nie wystarczy. Ta zmiana musi nastąpić wewnątrz pętli, abyś mógł ciągle sprawdzać, czy osiągnąłeś już właściwe pozycjonowanie, i w razie potrzeby dostosuj.

CSS z poprzedniej odpowiedzi jest nadal całkowicie poprawny:

#outer {
    position: relative; 
}

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

.pipe {
    width:0px; 
    float:right

}

Jednak JavaScript powinien wyglądać mniej więcej tak:

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; }
}

Wiem, że to bardzo stary wątek, ale nadal chciałbym odpowiedzieć. Jeśli ktoś postępuje zgodnie z poniższym css & html, to działa. Div stopki dziecka będzie przyklejać się do dołu jak klej.

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

Aby użyć margin-topwłaściwości css w celu ustawienia stopki na dno kontenera. I użyć text-align-lastwłaściwości css do ustawienia zawartości stopki na środku.

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

Och, młodzi ... Oto jesteś:

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

Brak absolutnej pozycji! Czuły! Stara szkoła

Dość stare pytanie, ale wciąż ... Możesz umieścić div na dole strony w następujący sposób:

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

Możesz zobaczyć, gdzie dzieje się magia. Myślę, że możesz zrobić to samo, aby przenieść go na dno rodzica div.

proste ...... w pliku html po prawej .... na dole znajduje się „stopka” (lub div, który chcesz na dole). Więc nie rób tego:

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

ZRÓB TO: (wstaw stopkę poniżej).

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

Po wykonaniu tej czynności możesz przejść do pliku css i przesunąć „pasek boczny” po lewej stronie. następnie „treść” unosi się w prawo, a następnie „stopka” wyczyść oba.

to powinno zadziałać. dla mnie.

Dostałem to do pracy przy pierwszej próbie dodając position:absolute; bottom:0;do div ID w CSS. Nie dodałem stylu nadrzędnegoposition:relative; .

Działa idealnie zarówno w Firefoksie, jak i IE 8, jeszcze nie wypróbowałem go w IE 7.

alternatywną odpowiedzią jest rozsądne użycie tabel i rozpiętości wierszy. ustawiając wszystkie komórki tabeli w poprzednim wierszu (z wyjątkiem jednej głównej zawartości) na rowspan = "2", zawsze otrzymasz jedną komórkę na dole głównej komórki tabeli, którą zawsze możesz ustawić valign = "bottom".

Możesz także ustawić jego wysokość tak, aby była minimalna dla jednej linii. Dzięki temu zawsze otrzymasz ulubioną linię tekstu na dole, niezależnie od tego, ile miejsca zajmuje reszta tekstu.

Próbowałem wszystkich odpowiedzi div, nie byłem w stanie zmusić ich do zrobienia tego, czego potrzebowałem.

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

oto moje rozwiązanie:

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

Możesz spróbować użyć pustego elementu o szerokości 1px i przesunąć go. Następnie usuń element, który chcesz ustawić, i użyj wysokości pustego elementu, aby kontrolować, jak daleko sięga.

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

.invisible {
float: left;  
}

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