Bagaimana cara mendapatkan div mengapung ke bagian bawah wadahnya?

Saya telah melayang gambar dan kotak inset di bagian atas wadah menggunakan float: kanan (atau kiri) berkali-kali. Baru-baru ini saya menemukan kebutuhan untuk mengapung div di sudut kanan bawah div lain dengan bungkus teks normal yang Anda dapatkan dengan float (teks yang dibungkus di atas dan ke kiri saja).

Saya pikir ini pasti relatif mudah walaupun float tidak memiliki nilai dasar tetapi saya belum dapat melakukannya dengan menggunakan sejumlah teknik dan mencari web belum menghasilkan apa pun selain menggunakan penentuan posisi absolut tetapi ini tidak berikan perilaku bungkus kata yang benar.

Saya pikir ini akan menjadi desain yang sangat umum tetapi ternyata tidak. Jika tidak ada yang punya saran saya harus memecah teks saya ke dalam kotak yang terpisah dan menyelaraskan div secara manual tapi itu agak berbahaya dan saya benci harus melakukannya pada setiap halaman yang membutuhkannya.

EDIT: Hanya catatan untuk siapa saja yang datang ke sini. Pertanyaan yang ditautkan di atas sebagai duplikat sebenarnya bukan duplikat. Persyaratan bahwa teks membungkus elemen inset membuatnya sangat berbeda. Sebenarnya, jawaban atas jawaban yang dipilih di sini memperjelas mengapa jawaban dalam pertanyaan terkait salah sebagai tanggapan terhadap pertanyaan ini. Bagaimanapun, tampaknya masih tidak ada solusi umum untuk masalah ini, tetapi beberapa solusi yang diposting di sini dan dalam pertanyaan terkait mungkin bekerja untuk kasus-kasus tertentu.

Atur div induk ke position: relative, lalu div bagian dalam ke ...

position: absolute; 
bottom: 0;

... dan begitulah :)

Cara untuk membuatnya berfungsi adalah sebagai berikut:

• Apungkan elemen Anda seperti biasa

• Putar div induk 180 derajat menggunakan

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

• Sekarang putar semua elemen yang mengambang ke kiri (beri mereka kelas) 180 derajat untuk meluruskannya lagi. Voila! mereka melayang ke bawah.

Setelah berjuang dengan berbagai teknik selama beberapa hari saya harus mengatakan bahwa ini tampaknya tidak mungkin. Bahkan menggunakan javascript (yang tidak ingin saya lakukan) sepertinya tidak mungkin.

Untuk mengklarifikasi bagi mereka yang mungkin tidak mengerti - inilah yang saya cari: dalam penerbitan itu cukup umum untuk tata letak inset (gambar, tabel, gambar, dll.) Sehingga garis bawahnya ke atas dengan bagian bawah yang terakhir baris teks dari sebuah blok (atau halaman) dengan teks yang mengalir di sekitar inset secara alami di atas dan ke kanan atau ke kiri tergantung pada sisi mana halaman inset aktif. Dalam html / css itu sepele untuk menggunakan gaya float untuk berbaris atas inset dengan bagian atas blok tetapi mengejutkan saya tampaknya tidak mungkin untuk berbaris di bagian bawah teks dan inset meskipun itu menjadi tugas tata letak umum .

Saya kira saya harus meninjau kembali tujuan desain untuk item ini kecuali ada yang punya saran menit terakhir.

Saya telah mencapai ini di JQuery dengan meletakkan elemen strut lebar nol di atas float kanan, kemudian mengukur strut (atau pipa) sesuai dengan tinggi induk dikurangi tinggi anak melayang.

Sebelum js menendang saya menggunakan pendekatan posisi absolut, yang berfungsi tetapi memungkinkan aliran teks di belakang. Oleh karena itu saya beralih ke posisi statis untuk mengaktifkan pendekatan strut. (header adalah elemen induk, guntingan adalah yang saya inginkan di kanan bawah, dan pipa adalah penyangga saya)

$("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 ke-1, lalu ke guntingan, lalu teks dalam urutan HTML.

Ini menempatkan div tetap di bagian bawah halaman dan perbaikan ke bawah saat Anda menggulir ke bawah

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

Letakkan div di div lain dan atur gaya div induk ke position:relative;Kemudian di child div atur properti CSS berikut:position:absolute; bottom:0;

Jika Anda baik-baik saja dengan hanya baris paling bawah dari teks pergi ke sisi blok (sebagai lawan untuk benar-benar di sekitar dan di bawahnya, yang tidak dapat Anda lakukan tanpa mengakhiri blok dan memulai yang baru), itu bukan tidak mungkin mengapung blok ke salah satu sudut bawah blok induk. Jika Anda meletakkan beberapa konten dalam tag paragraf di dalam blok dan ingin melayang tautan ke sudut kanan bawah blok, letakkan tautan di dalam paragraf blok dan atur ke float: right, lalu masukkan div tag dengan jelas : keduanya diset tepat di bawah akhir tag paragraf. Div terakhir adalah untuk memastikan tag induk mengelilingi tag mengambang.

<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 posisi pengaturan bawah: absolut; dan bawah: 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 teksnya dibungkus dengan baik: -

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

Saya tahu bahwa barang ini sudah tua, tetapi baru-baru ini saya mengalami masalah ini.

menggunakan saran posisi absolut divs benar-benar konyol, karena seluruh hal float semacam kehilangan titik dengan posisi absolut ..

sekarang, saya tidak menemukan solusi universal, tetapi dalam banyak kasus prople menggunakan floating divs hanya untuk menampilkan sesuatu secara berurutan, seperti serangkaian elemen span. dan Anda tidak dapat menyelaraskannya secara vertikal.

untuk mencapai efek yang serupa Anda dapat melakukan ini: jangan membuat div float, tetapi atur properti display-nya inline-block. maka Anda dapat menyelaraskannya secara vertikal namun itu menyenangkan Anda. Anda hanya perlu properti div set orang tua vertical-alignbaik top, bottom, middleataubaseline

Saya harap itu membantu seseorang

Dengan diperkenalkannya Flexbox , ini menjadi sangat mudah tanpa banyak peretasan. align-self: flex-endpada elemen anak akan menyelaraskannya di sepanjang sumbu silang .

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

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

Keluaran:

.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 telah menemukan solusi ini untuk waktu yang lama juga. Inilah yang saya dapatkan:

align-self: flex-end;

tautan: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Namun, saya tidak dapat mengingat dari mana saya membuka tautan ini. Semoga ini bisa membantu

Saya hanya akan melakukan meja.

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

Lihat dalam aksi:
http://jsfiddle.net/mLphM/1/

Saya mencoba beberapa teknik ini, dan berikut ini bekerja untuk saya, jadi jika semuanya ada di sini jika semuanya gagal maka coba ini karena berhasil untuk saya :).

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

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

A memilih pendekatan @ dave-kok ini. Tapi itu hanya berfungsi jika seluruh konten sesuai tanpa menggulir. Saya menghargai jika seseorang akan meningkat

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/

Ini sekarang dimungkinkan dengan kotak fleksibel. Cukup atur 'display' dari parent parent sebagai 'flex' dan atur properti 'margin-top' ke 'auto'. Ini tidak mendistorsi properti dari kedua div tersebut.

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

Tidak yakin, tetapi skenario yang diposting sebelumnya tampaknya berfungsi jika Anda menggunakan posisi: relatif bukan absolut pada div anak.

#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 meja ...!

Jika Anda memerlukan perataan relatif dan DIV masih tidak memberikan apa yang Anda inginkan, cukup gunakan tabel dan setel valign = "bawah" di sel yang Anda inginkan kontennya disejajarkan dengan bagian bawah. Saya tahu ini bukan jawaban yang bagus untuk pertanyaan Anda karena DIV seharusnya mengganti tabel, tapi inilah yang harus saya lakukan baru-baru ini dengan keterangan gambar dan sejauh ini sudah berfungsi dengan sempurna.

Saya mencoba skenario ini diposting sebelumnya juga;

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

Penentuan posisi absolut memperbaiki div ke bagian terendah browser setelah memuat halaman, tetapi ketika Anda menggulir ke bawah jika halaman lebih panjang, itu tidak menggulir dengan Anda. Saya mengubah posisi menjadi relatif dan berfungsi dengan sempurna. Div langsung ke bagian bawah saat dimuat sehingga Anda tidak akan benar-benar melihatnya sampai Anda mencapai bagian bawah.

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

Salah satu pendekatan yang menarik adalah menumpuk beberapa elemen float kanan di atas satu sama lain.

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

Satu-satunya masalah adalah bahwa ini hanya berfungsi ketika Anda mengetahui ketinggian kotak.

Jawaban Stu datang paling dekat dengan bekerja sejauh ini, tetapi masih belum memperhitungkan fakta bahwa tinggi div luar Anda dapat berubah, berdasarkan pada cara teks membungkus di dalamnya. Jadi, memposisikan ulang div bagian dalam (dengan mengubah ketinggian "pipa") hanya sekali saja tidak akan cukup. Perubahan itu harus terjadi di dalam satu lingkaran, sehingga Anda dapat terus memeriksa apakah Anda telah mencapai penentuan posisi yang tepat, dan menyesuaikan kembali jika diperlukan.

CSS dari jawaban sebelumnya masih benar-benar valid:

#outer {
    position: relative; 
}

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

.pipe {
    width:0px; 
    float:right

}

Namun, Javascript akan terlihat seperti ini:

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

Saya tahu ini adalah utas yang sangat lama tetapi saya masih ingin menjawab. Jika ada yang mengikuti css & html di bawah ini maka itu berfungsi. Child footer div akan menempel dengan lem seperti dasar.

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

Untuk menggunakan margin-topproperti css dengan tujuan untuk mengatur footer ke bagian bawah wadahnya. Dan untuk menggunakan text-align-lastproperti css untuk mengatur konten footer di tengah.

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

Oh, anak-anak .... Di sini Anda:

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

Tidak ada posisi absolut! Responsif! OldSchool

Pertanyaan yang cukup lama, tapi tetap saja ... Anda dapat mengapung div ke bagian bawah halaman seperti ini:

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

Anda bisa melihat di mana keajaiban terjadi. Saya pikir Anda bisa melakukan hal yang sama untuk melayang ke bagian bawah div induk.

sederhana ...... di kanan file html .... punya "footer" (atau div yang Anda inginkan di bagian bawah) di bagian bawah. Jadi jangan lakukan ini:

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

LAKUKAN INI: (letakkan footer di bawahnya.)

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

Setelah melakukan ini maka Anda dapat pergi file css dan memiliki "sidebar" mengapung ke kiri. kemudian miliki "konten" mengambang ke kanan lalu "footer" hapus keduanya.

itu harus bekerja. Apakah untuk saya.

Saya mendapatkan ini untuk bekerja pada percobaan pertama dengan menambahkan position:absolute; bottom:0;ID div di dalam CSS. Saya tidak menambahkan gaya indukposition:relative; .

Ini berfungsi sempurna di Firefox dan IE 8, belum mencobanya di IE 7.

jawaban alternatif adalah penggunaan tabel dan rowspan secara bijaksana. dengan mengatur semua sel tabel pada baris sebelumnya (kecuali konten utama) menjadi rowspan = "2" Anda akan selalu mendapatkan lubang satu sel di bagian bawah sel tabel utama Anda sehingga Anda selalu dapat menempatkan valign = "bawah".

Anda juga dapat mengatur ketinggiannya menjadi minimum yang Anda butuhkan untuk satu baris. Dengan demikian Anda akan selalu mendapatkan baris teks favorit Anda di bagian bawah terlepas dari berapa banyak ruang yang dihabiskan oleh sisa teks.

Saya mencoba semua jawaban div, saya tidak dapat membuat mereka melakukan apa yang saya butuhkan.

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

inilah solusi saya:

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

Anda dapat mencoba menggunakan elemen kosong dengan lebar 1px dan mengapungkannya. Kemudian kosongkan elemen yang sebenarnya ingin Anda posisikan dan gunakan ketinggian elemen kosong untuk mengontrol seberapa jauh ia berjalan.

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

.invisible {
float: left;  
}

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