Bagaimana cara menyelaraskan konten div ke bawah

1164

Katakanlah saya memiliki kode CSS dan HTML berikut:

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

Luaskan cuplikan

Bagian tajuk adalah ketinggian tetap, tetapi konten tajuk dapat berubah.

Saya ingin konten tajuk disejajarkan secara vertikal ke bagian bawah tajuk, sehingga baris terakhir dari teks "menempel" ke bagian bawah tajuk.

Jadi jika hanya ada satu baris teks, itu akan seperti:

-----------------------------
| Judul tajuk
|
|
|
| konten tajuk (menghasilkan satu baris)
-----------------------------

Dan jika ada tiga baris:

-----------------------------
| Judul tajuk
|
| konten tajuk (yang demikian
| banyak hal yang sempurna
| membentang lebih dari tiga baris)
-----------------------------

Bagaimana ini bisa dilakukan dalam CSS?

html css vertical-alignment

— kristof
sumber

1323

Posisi relatif + absolut adalah taruhan terbaik Anda:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

Luaskan cuplikan

Tapi Anda mungkin mengalami masalah dengan itu. Ketika saya mencobanya saya punya masalah dengan menu dropdown muncul di bawah konten. Itu tidak cantik.

Jujur saja, untuk masalah pemusatan vertikal dan, yah, masalah penyelarasan vertikal dengan item tidak tetap tinggi, lebih mudah hanya menggunakan tabel.

Contoh: Bisakah Anda melakukan tata letak HTML ini tanpa menggunakan tabel?

— cletus
sumber

4

Saya sebenarnya menemukan solusi itu sebelum bertanya di sini, tetapi entah bagaimana lupa menambahkan posisi: relatif; ke div header dan konten terus mendarat di bagian bawah halaman. Terima kasih

— kristof

15

Anda dapat mengelola posisi dropdown Anda dengan properti z-index untuk membawanya ke depan. Ingat bahwa properti z-index bekerja dengan elemen yang diposisikan relatif atau mutlak. Juga, secara semantik tidak benar menggunakan tabel untuk mencapai hasil tata letak.

— Alejandro García Iglesias

1

Dalam hal konten teks seperti yang dijelaskan dalam masalah asli, # header-konten harus benar-benar menjadi pelemen, atau setidaknya aspan

— Josh Burgess

2

Jangan gunakan tabel untuk data non-tabular! Sebagai gantinya, gunakan properti tampilan CSS display: table-cell, atau table-row, atau table. Anda tidak perlu lagi menggunakan tabel untuk tata letak murni.

— Jeremy Moritz

1

Posisi header relatif terhadap apa?

— stack1

158

Gunakan posisi CSS:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

Seperti yang dicatat cletus , Anda perlu mengidentifikasi konten tajuk untuk membuatnya berfungsi.

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

— Patrick McElhaney
sumber

4

fyi ... ini menyebabkan konten tajuk saya runtuh lebarnya, jadi saya harus menambahkan width = '100%'konten tajuk

— dsdsdsdsd

2

@dsdsdsdsd Anda juga dapat memperbaikinya dengan menambahkan tampilan: blokir ke # header-content.

— Patrick McElhaney

1

@dsdsdsdsd Alasannya adalah karena <span>elemen display: inline;secara default, yang tidak mengambil lebar penuh wadah. Perbaikan yang paling tepat adalah mengubah rentang menjadi <div>, yang merupakan elemen blok secara default.

— BadHorsie

1

Atau salah satu dari <h1> - <h6> yang juga memblokir secara default dan mengidentifikasi teks sebagai header, yang berguna untuk mesin pencari, teknologi bantu, dan orang yang membaca kode.

— Patrick McElhaney

Tidak berfungsi ketika konten di bagian bawah memiliki tinggi variabel, menyebabkannya melampaui batas wadah.

— Mozfet

126

Jika Anda tidak khawatir tentang browser lawas, gunakan flexbox.

Elemen induk perlu jenis tampilan yang disetel agar lentur

div.parent {
  display: flex;
  height: 100%;
}

Kemudian Anda mengatur align-self elemen anak ke flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Inilah sumber yang saya pelajari: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

— Lee Irvine
sumber

@ bafromca, dua alasan yang tidak berhasil. 1: Gunakan 'luruskan sendiri' alih-alih luruskan item (salahku, saya telah mengedit posting asli saya). 2: Tinggi 100% tidak akan berfungsi kecuali orangtua memiliki tinggi badan.

— Lee Irvine

Tidak bekerja untuk saya, saya ingin itu di bagian bawah wadah, bukan di ujung item dalam wadah.

— Mozfet

Pada tahun 2020 ini harus menjadi jawaban yang benar: caniuse.com/#feat=flexbox

— tonygatta

119

Saya menggunakan properti ini dan berfungsi!

#header {
  display: table-cell;
  vertical-align: bottom;
}

— Johannchopin
sumber

42

Tidak didukung di IE8 dan sebelumnya. Itu didukung di IE9.

— random_user_name

23

@cale_b Menurut caniuse.com itu TIDAK bekerja di IE8.

— Zach Lysobey

5

@ ZachL Happenstance - Saya mendukung aplikasi lawas di IE8 untuk klien korporat dan ini ternyata bekerja.

— Daniel Szabo

4

@fguillen: baru saja diuji di Chrome (v31). Bekerja di sana juga.

— Daniel Szabo

5

table-cellmemecah banyak hal. Seperti sistem grid Bootstrap. col-md-12tidak akan memberi Anda lebar 100% lagi.

— Noah

65

Setelah berjuang dengan masalah yang sama ini untuk beberapa waktu, saya akhirnya menemukan solusi yang memenuhi semua persyaratan saya:

Tidak mengharuskan saya tahu tinggi wadahnya.
Tidak seperti solusi absolut + absolut, konten tidak mengapung di lapisannya sendiri (yaitu, ia menempel secara normal di div wadah).
Bekerja lintas browser (IE8 +).
Mudah diimplementasikan.

Solusinya hanya butuh satu <div>, yang saya sebut "pelurus":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

Trik ini berfungsi dengan membuat div tinggi dan kurus, yang mendorong garis dasar teks ke bagian bawah wadah.

Berikut adalah contoh lengkap yang mencapai apa yang diminta OP. Saya telah membuat "bottom_aligner" tebal dan merah untuk tujuan demonstrasi saja.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Sejajarkan konten bawah

— Greg Prisament
sumber

Hampir sempurna :) tetapi tidak memungkinkan jeda baris otomatis.

— Gaston Sanchez

Tidak berfungsi jika wadah luar dapat menggulir (melimpah-y: otomatis). :(

— ecraig12345

Saya kira marin: 8px seharusnya margin: 8px

— Graham Perrin

2

Ini juga berfungsi jika dimasukkan ke dalam ::beforeaturan, yang menghilangkan kebutuhan elemen tambahan. Kami menggunakan flex pada akhirnya, tetapi ini berguna ketika Anda tidak bisa.

— Sheepy

Ini adalah solusi yang sangat bagus. Ini hanya berfungsi jika heightkotak / wadah dan orang tuanya diatur (ke px atau% atau apa pun).

— BairDev

38

Cara modern untuk melakukannya adalah menggunakan flexbox . Lihat contoh di bawah ini. Anda bahkan tidak perlu membungkus Some text...dengan tag HTML apa pun, karena teks yang langsung terkandung dalam wadah fleksibel dibungkus dengan item fleksibel anonim.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Luaskan cuplikan

Jika hanya ada beberapa teks dan Anda ingin menyelaraskan secara vertikal ke bagian bawah wadah.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

Luaskan cuplikan

— Stiker
sumber

2

Saya membutuhkan elemen garis bawah saya untuk tetap ada dalam aliran dokumen, yang tidak mungkin saat menggunakan position:absolute;. Solusi ini bekerja dengan sempurna untuk kasus saya!

— Swen

1

Di dalam komponen reaksi, ini adalah solusi yang tepat. Solusi yang diterima gagal.

— Soleil - Mathieu Prévot

1

Ini adalah satu-satunya solusi yang benar-benar bekerja untuk saya. Mungkin itu ada hubungannya dengan Bereaksi, seperti @Soleil telah menyebutkan ... Saya bukan ahli CSS, jadi saya tidak sepenuhnya yakin.

— BK

Berfungsi sempurna dalam komponen reaksi

— user1155773

25

Elemen blok sebaris atau sebaris dapat disejajarkan ke bagian bawah elemen tingkat blok jika ketinggian garis induk / elemen blok lebih besar dari elemen sebaris. *

markup:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* pastikan Anda dalam mode standar

— dougwig
sumber

25

display: flex;
align-items: flex-end;

— pengguna3053247
sumber

2

Perhatikan bahwa flexbox tidak didukung dengan baik di browser lama.

— AnthonyB

11

@AnthonyB - tentukan lama? Kami harus mengubah catatan ini sebagai pengembang. Teknologi bergerak maju, dan yang lama tidak bisa bertahan. IE9 dan 10 memiliki masalah dengan flex dari apa yang dapat saya lihat, tetapi mereka dirilis masing-masing pada tahun 2011 dan 2012 ... ini tahun 2017. Kita harus melepaskan browser yang usang dan rusak ini. Jika tidak untuk kepuasan visual, tetapi untuk keamanan dan pembaruan perangkat lunak umum.

— Tisch

3

@Tisch Anda benar sekali, kami sebagai pengembang harus menggunakan teknologi yang layak dan terkini. Tapi saya cukup memperingatkan tentang masalah kompatibilitas ini, agar tidak terkejut.

— AnthonyB

jika konten di bawahnya <h1>ada di dalam <p>atau <div>akan saya gunakan justify-content: space-between.

— agapitocandemor

11

Anda cukup mencapai flex

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Luaskan cuplikan

— MK Vimalan
sumber

6

Jika Anda memiliki beberapa item tinggi dinamis, gunakan nilai tampilan CSS dari tabel dan sel-tabel:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

Saya telah membuat demo JSBin di sini: http://jsbin.com/INOnAkuF/2/edit

Demo ini juga memiliki contoh cara mensejajarkan secara vertikal menggunakan teknik yang sama.

— romiem
sumber

5

Berikut adalah solusi lain menggunakan flexbox tetapi tanpa menggunakan flex-end untuk penyejajaran bawah. Idenya adalah untuk set margin-bottompada h1 untuk auto untuk mendorong konten yang tersisa ke bawah:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

Luaskan cuplikan

Kita juga dapat melakukan hal yang sama margin-top:autopada teks tetapi dalam kasus ini kita perlu membungkusnya di dalam divatau span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

Luaskan cuplikan

— Temani Afif
sumber

Perfecto! gracias

— Grace Nikole

4

Anda tidak perlu + mutlak relatif untuk ini. Sangat mungkin menggunakan posisi relatif untuk wadah dan data. Ini adalah bagaimana Anda melakukannya.

Asumsikan ketinggian data Anda akan menjadi x. Wadah Anda relatif dan catatan kaki juga relatif. Yang harus Anda lakukan adalah menambah data Anda

bottom: -webkit-calc(-100% + x);

Data Anda akan selalu di bagian bawah wadah Anda. Bekerja bahkan jika Anda memiliki wadah dengan ketinggian dinamis.

HTML akan seperti ini

<div class="container">
  <div class="data"></div>
</div>

CSS akan seperti ini

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Contoh langsung di sini

Semoga ini membantu.

— Aditya Ponkshe
sumber

Bisakah Anda menjelaskan apa yang bottom: -webkit-calc(-100% + x);sedang dilakukan?

— mhatch

@match itu menjaga footer di bagian bawah wadah.

— Aditya Ponkshe

4

Inilah cara fleksibel untuk melakukannya. Tentu saja, itu tidak didukung oleh IE8, seperti yang dibutuhkan pengguna 7 tahun yang lalu. Tergantung pada apa yang Anda butuhkan untuk mendukung, beberapa di antaranya dapat dihilangkan.

Namun, alangkah baiknya jika ada cara untuk melakukan ini tanpa wadah luar, hanya memiliki teks menyelaraskan dirinya di dalam dirinya sendiri.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

— abaikan web smith yang berpikiran
sumber

4

solusi satu-baris yang sangat sederhana adalah menambahkan baris-heigth ke div, mengingat semua teks div akan berada di bawah.

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

perlu diingat bahwa ini adalah solusi praktis dan cepat ketika Anda hanya ingin teks di dalam div diturunkan, jika Anda perlu menggabungkan gambar dan hal-hal, Anda harus kode CSS yang sedikit lebih kompleks dan responsif

— Pablo Contreras
sumber

3

jika Anda dapat mengatur ketinggian div pembungkus konten (# header-content seperti yang ditunjukkan pada balasan orang lain), alih-alih seluruh header #, mungkin Anda juga dapat mencoba pendekatan ini:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

tampilkan di codepen

— codeboy
sumber

3

Tampaknya bekerja:

HTML: Saya di bagian bawah

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

— File Admin3
sumber

3

Semua jawaban ini dan tidak ada yang berhasil untuk saya ... Saya bukan ahli flexbox, tapi ini cukup mudah untuk diketahui, sederhana dan mudah dimengerti dan digunakan. Untuk memisahkan sesuatu dari sisa konten, masukkan div kosong dan biarkan tumbuh untuk mengisi ruang.

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

Ini bereaksi seperti yang diharapkan ketika konten bawah tidak berukuran tetap juga ketika wadah tidak berukuran tetap.

— Mozfet
sumber

3

Saya telah menemukan cara yang jauh lebih sederhana dari apa yang telah disebutkan.

Atur tinggi div header. Kemudian di dalamnya, beri style pada H1tag Anda sebagai berikut:

float: left;
padding: 90px 10px 11px

Saya sedang mengerjakan situs untuk klien, dan desainnya mengharuskan teks berada di bagian bawah div tertentu. Saya telah mencapai hasil menggunakan dua baris ini, dan itu berfungsi dengan baik. Juga, jika teks berkembang, padding akan tetap sama.

— mickburkejnr
sumber

1

Akan menyebabkan konten melayang di atas konten lain saat mengubah ukuran layar menggunakan tata letak responsif.

— Mozfet

2

Saya menemukan solusi ini dimainkan pada templat start bootstrap default

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

— XMaster
sumber

2

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

Luaskan cuplikan

— pengguna841657
sumber

1

Ini menyebabkan ukuran dari div teratas. Yang berfungsi untuk tata letak teks dasar, tetapi tidak berfungsi saat segala sesuatu memiliki latar belakang dan warna serta ukuran yang harus dihormati.

— Mozfet

0

coba dengan:

div.myclass { margin-top: 100%; }

coba ubah% untuk memperbaikinya. Contoh: 120% atau 90% ... dll.

— felix
sumber

Bekerja dengan baik dengan 1 set konten, tetapi perlu disesuaikan jika konten berubah. Jika konten dinamis, maka jangan gunakan ini!

— Mike Graf

0

Situs yang baru saja saya lakukan untuk klien meminta agar teks footer adalah kotak tinggi, dengan teks di bagian bawah saya mencapai ini dengan padding sederhana, harus bekerja untuk semua browser.

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

— Nicki L. Hansen
sumber

1

Deklarasi pertama Anda padding: 0 30pxagak berlebihan, Anda mungkin harus meletakkan padding: 30px2 deklarasi lainnya.

— Andrew

Benar sekali, namun saya mengikuti praktik tempat kerja saya.

— Nicki L. Hansen

6

Sungguh ?, itu sepertinya praktik buruk . Cukup gunakan steno, atau menjadi eksplisit di mana-mana. padding: 60px 30px 8px;,, padding: 60px 30px 8px 30px;empat padding-aturan eksplisit , atau bahkan saran @ TheWaxMann semuanya lebih unggul - dan saya bersedia dan dapat membantahnya ;-)

— Zach Lysobey

-3

Contoh lintas-browser yang sempurna mungkin adalah yang ini di sini:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

Idenya adalah untuk menampilkan div di bagian bawah dan juga membuatnya menempel di sana. Seringkali pendekatan sederhana akan membuat div lengket gulir ke atas dengan konten utama.

Berikut ini adalah contoh minimal yang berfungsi penuh. Perhatikan bahwa tidak diperlukan tipu daya penyisipan div. Banyak BR hanya untuk memaksa bilah gulir muncul:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

Jika Anda bertanya-tanya kode Anda mungkin tidak berfungsi pada IE, ingatlah untuk menambahkan tag DOCTYPE di bagian atas. Sangat penting untuk ini bekerja di IE. Juga, ini harus menjadi tag pertama dan tidak ada yang muncul di atasnya.

— Palsu
sumber

28

Karena Anda mendeklarasikan dokumen Anda sebagai XHTML ketat, Anda juga harus menutup sendiri <br />tag Anda ...

— Amos M. Carpenter

7

@ KarlKildén jika Anda merujuk pada komentar dari aaamos, itu pasti bukan komentar konyol - melayani dokumen di atas dengan tajuk yang benarcontent-type akan menghasilkan browser membuat kesalahan parsing xml.

— Razor

7

Ini praktik buruk! Gunakan CSS sebagai gantinya!

— m93a

-4

Tampaknya bekerja:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Menggunakan lebih sedikit membuat memecahkan teka-teki CSS jauh lebih seperti pengkodean daripada seperti ... Saya suka CSS. Ini adalah kesenangan nyata ketika Anda dapat mengubah seluruh tata letak (tanpa merusaknya :) hanya dengan mengubah satu parameter.

— esp
sumber

-7

Solusi 2015

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

sama-sama

— waza123
sumber

3

Tata letak tabel untuk ini bisa bermasalah; CSS direkomendasikan sebagai gantinya. Properti valign juga tidak didukung dalam HTML5. (lihat w3schools.com/tags/att_td_valign.asp )

— tidak dapat disangkal