Bagaimana cara mendapatkan div mengapung ke bagian bawah wadah?

Mengatur div induk untuk position: relative, maka batin div untuk...

position: absolute; 
bottom: 0;

...dan di sana anda pergi :)

Cara untuk membuatnya bekerja adalah sebagai berikut:

• Float anda unsur-unsur kiri seperti normal
• Memutar induk div 180 derajat menggunakan

-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotasi=2); JSfiddle: http://jsfiddle.net/wcneY/

• Sekarang memutar semua elemen yang mengapung kiri (memberi mereka class) 180 derajat untuk menempatkan mereka lurus lagi. Voila! mereka mengapung ke bawah.

Setelah berjuang dengan berbagai teknik selama beberapa hari saya harus mengatakan bahwa ini tampaknya tidak mungkin. Bahkan menggunakan javascript (yang saya don't ingin melakukan) itu doesn't tampak mungkin.

Untuk memperjelas bagi orang-orang yang mungkin tidak mengerti - ini adalah apa yang saya cari: di penerbitan itu cukup umum untuk tata letak inset (gambar, tabel, gambar, dll.) sehingga garis bawah sampai dengan bagian bawah baris terakhir teks yang di blok (atau halaman) dengan teks yang mengalir di sekitar inset dengan cara alami di atas dan ke kanan atau kiri, tergantung pada sisi mana dari halaman inset adalah pada. Dalam html/css itu sepele untuk menggunakan gaya mengambang untuk line up bagian atas inset dengan bagian atas dari sebuah blok tapi saya terkejut tampaknya mustahil untuk garis bawah dari teks dan inset meskipun itu menjadi umum tugas tata letak.

Saya kira saya'll harus meninjau kembali tujuan desain untuk item ini, kecuali ada yang memiliki menit-menit terakhir saran.

Aku telah dicapai ini di JQuery dengan menempatkan lebar nol penyangga elemen di atas pelampung benar, maka ukuran penyangga (atau pipa) menurut orang tua ketinggian minus melayang anak's tinggi.

Sebelum js tendangan saya menggunakan posisi mutlak pendekatan, yang bekerja tetapi memungkinkan aliran teks di belakang. Oleh karena itu saya beralih ke posisi statis untuk mengaktifkan strut pendekatan. (header adalah elemen induk, potongan adalah salah satu yang saya inginkan kanan bawah, dan pipa ini saya strut)

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

}

Pipa harus datang 1, maka potongan, maka teks dalam HTML pesanan.

Hal ini menempatkan tetap div di bagian bawah halaman dan perbaikan ke bawah seperti yang anda menggulir ke bawah

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

Menempatkan div yang di dalam div lain dan mengatur induk div's gaya position:relative; Kemudian pada anak div set berikut CSS properties: position:absolute; bottom:0;

Jika anda're oke dengan hanya paling bawah baris teks yang akan pergi ke sisi blok (sebagai lawan untuk benar-benar di bawah ini, yang dapat anda't melakukan apa-apa tanpa akhir blok dan memulai yang baru), it's tidak mungkin untuk mengapung blok ke salah satu sudut bawah dari blok induk. Jika anda menempatkan beberapa konten dalam tag paragraf dalam sebuah blok dan ingin mengapung link ke sudut kanan bawah dari blok, menempatkan link dalam ayat blok dan set ke float: right, kemudian dimasukkan ke dalam tag div dengan clear: both set hanya di bawah akhir dari tag paragraf. Terakhir div adalah untuk memastikan orang tua tag mengelilingi melayang kategori.

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

Jika anda mengatur elemen induk sebagai posisi:relatif, anda dapat mengatur anak ke bawah pengaturan position:absolute; dan bottom: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>

Jika anda ingin teks yang membungkus baik:-

<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

.outer {
  display: table;
}

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

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

Saya tahu bahwa hal ini sudah tua, tapi aku baru saja berlari ke dalam masalah ini.

menggunakan mutlak posisi divs nasihat ini benar-benar konyol, karena seluruh mengapung hal semacam kehilangan poin dengan posisi absolut..

sekarang, saya tidak menemukan sebuah solusi universal, tetapi dalam banyak kasus warga dengan menggunakan floating divs hanya untuk menampilkan sesuatu berturut-turut, seperti rangkaian span unsur-unsur. dan anda dapat't vertikal sejajar itu.

untuk mencapai efek yang sama anda dapat melakukan hal ini: jangan membuat div mengapung, tapi set's menampilkan properti untuk inline-block. kemudian anda dapat menyelaraskan vertikal namun itu menyenangkan anda. anda hanya perlu mengatur orangtua's div properti vertical-align baik top, bawah, tengah atau dasar

saya berharap yang membantu seseorang

Dengan pengenalan Flexbox, ini telah menjadi cukup mudah tanpa banyak hacking. menyelaraskan diri: flex-end pada elemen anak akan menyelaraskan sepanjang cross-axis.

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

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

Output:

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

Saya hanya akan melakukan sebuah tabel.

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

Dan CSS:

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

Melihatnya dalam tindakan: http://jsfiddle.net/mLphM/1/

Yang memilih pendekatan ini dari @dave-kok. Tapi itu hanya bekerja jika seluruh konten jas tanpa bergulir. Saya menghargai jika seseorang akan meningkatkan

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

Berikut ini adalah kode http://jsfiddle.net/d9t9joh2/

Tidak yakin, tapi skenario diposting sebelumnya tampaknya bekerja jika anda menggunakan position: relative bukan mutlak pada anak 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>

Dan tidak ada tabel...!

Saya telah menemukan solusi ini untuk waktu yang lama juga. Ini adalah apa yang saya dapatkan:

menyelaraskan diri: flex-end;

link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Namun, saya dapat't ingat dari mana saya membuka link ini. Semoga membantu

Ini sekarang mungkin dengan flex box. Hanya mengatur 'display' dari orang tua div sebagai 'flex' dan menetapkan 'margin-top' properti untuk 'auto'. Ini tidak merusak properti apapun dari kedua 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>

Saya mencoba beberapa teknik ini, dan berikut ini bekerja untuk saya, jadi jika semua yang lain di sini jika semuanya gagal kemudian mencoba hal ini karena ia bekerja untuk saya :).

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


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

Untuk menggunakan css margin-top properti dengan tujuan untuk mengatur footer untuk bagian bawah wadah. Dan untuk menggunakan css text-align terakhir property untuk mengatur isi footer di pusat.

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

Jika anda membutuhkan relatif keselarasan dan DIV's masih aren't memberikan apa yang anda inginkan, hanya menggunakan meja dan mengatur valign = "bottom" dalam sel anda ingin konten sejajar ke bawah. Aku tahu itu's bukan jawaban yang bagus untuk pertanyaan anda sejak DIV's diharapkan untuk mengganti meja, tapi ini adalah apa yang harus saya lakukan baru-baru ini dengan sebuah gambar keterangan dan telah bekerja dengan sempurna sejauh ini.

Saya mencoba skenario ini diposting sebelumnya juga;

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

Absolute positioning perbaikan div ke bagian terendah dari browser setelah loading halaman, tapi ketika anda gulir ke bawah jika halaman lebih itu tidak gulir dengan anda. Aku merubah posisi menjadi relatif dan itu bekerja dengan sempurna. Div pergi lurus ke bawah pada beban sehingga anda tidak't benar-benar melihat hal itu sampai anda mendapatkan ke bawah.

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