Memposisikan div di dekat sisi bawah div lain

102

Saya memiliki div luar dan div dalam. Saya perlu menempatkan div dalam di bagian bawah div luar.

Div luar elastis (lebar: 70% misalnya). Saya juga perlu memusatkan blok dalam.

Model simple make up yang dideskripsikan terlihat pada gambar di bawah ini:

masukkan deskripsi gambar di sini

html css layout Roma
sumber

apakah tingginya juga elastis? Jika tidak, Anda dapat mengatur margin-top untuk kotak dalam ke (outerBoxHeight - innerBoxHeight).

peirix

@peirix: ya, tinggi blok luar bisa berubah dan kita tidak mengetahuinya

Roman

79

Diuji dan berfungsi di Firefox 3, Chrome 1, dan IE 6, 7 dan 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

Versi langsung di sini: http://jsfiddle.net/RichieHindle/CresX/

RichieHindle
sumber

Terima kasih, solusi Anda hampir benar. Saya hanya perlu menambahkan "// margin-left: -40px" ke gaya blok hijau untuk IE. Tanpa peretasan ini dengan atribut margin-left, blok hijau Anda dibuang ke IE7. Adakah yang bisa menjelaskan dari mana 40px ini berasal?

Roman

IE7 memposisikan div hijau secara horizontal setelah kata "Luar". Saya telah memperbarui kode untuk menentukan "kiri: 0".

RichieHindle

13

Anda membutuhkan div pembungkus untuk bagian bawah, untuk memusatkannya.

<style>
   /* making it look like your nice illustration */
   #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
   #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }

   /* positioning the boxes correctly */
   #outer { position: relative; }
   #wrapper { position: absolute; bottom: 3px; width: 100%; }
   #inner { margin: 0 auto; }
</style>


<div id="outer">
   <div id="wrapper"><div id="inner"></div></div>
</div>

Magnar
sumber

7

CSS3 Flexboxmemungkinkan pemosisian bawah dengan sangat mudah. Periksa tabel dukungan Flexbox

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  display: flex;
  justify-content: center; /* Center content inside */
}
.inner {
  align-self: flex-end; /* At the bottom of the parent */
}

Keluaran:

Tampilkan cuplikan kode

.outer {
  background: #F2F2CD;
  display: flex;
  width: 70%;
  height: 200px;
  border: 2px solid #C2C2C3;
  justify-content: center;
}
.inner {
  background: #FF0081;
  width: 75px;
  height: 50px;
  border: 2px solid #810000;
  align-self: flex-end;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

Luaskan cuplikan

m4n0
sumber

5

Bekerja dengan baik di semua browser termasuk IE6.

<style>
    #outer{
        width: 70%;
        background-color: #F2F2CC;
        border: 1px solid #C0C0C0;
        height: 500px;
        position: relative;
        text-align: center;
    }

    #inner{
        background-color: #FF0080;
        border: 1px solid black;
        width: 30px;
        height: 20px;

        /* Position at the bottom */
        position: relative;
        top: 95%;

        /* Center */
        margin: 0 auto;
        text-align: left;
    }
</style>

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

Dmitri Farkov
sumber

atas 95% tidak sama dengan mengatakan 10px bawah. Anda ingin kotak bagian dalam berlabuh di bagian bawah saat layar diubah ukurannya.

pengguna959690

Memposisikan div di dekat sisi bawah div lain

Jawaban: