Katakanlah saya memiliki berikut CSS dan HTML:
#header {
height: 150px;
}
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
Bagian header adalah tetap tinggi, tapi isi header bisa berubah.
Saya ingin isi dari header yang harus ditata vertikal ke bawah dari bagian header, sehingga baris terakhir dari teks "tongkat" untuk bagian bawah bagian header.
Jadi jika hanya ada satu baris teks, itu akan menjadi seperti:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
Dan jika ada tiga garis:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
Bagaimana hal ini dapat dilakukan di CSS?
Relatif+absolute positioning 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>
Tapi anda mungkin mengalami masalah dengan itu. Ketika saya mencobanya, saya punya masalah dengan menu dropdown yang muncul di bawah konten. It's hanya tidak cukup.
Jujur, untuk centering vertikal isu-isu dan, yah, vertikal keselarasan masalah dengan barang-barang aren't tetap tinggi,'s mudah hanya dengan menggunakan tabel.
Contoh: anda Dapat melakukan hal ini tata letak HTML tanpa menggunakan tabel?
Menggunakan CSS positioning:
/* 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;
}
Sebagai cletus mencatat, anda perlu mengidentifikasi header-konten untuk membuat karya ini.
<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>
Jika anda're tidak khawatir tentang warisan browser menggunakan flexbox.
Elemen induk membutuhkan tipe layar diatur ke flex
div.parent {
display: flex;
height: 100%;
}
Kemudian anda mengatur elemen anak's menyelaraskan diri untuk flex-end.
span.child {
display: inline-block;
align-self: flex-end;
}
Berikut ini's sumber daya yang saya digunakan untuk belajar: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Setelah berjuang dengan masalah yang sama selama beberapa waktu, akhirnya saya menemukan solusi yang memenuhi semua persyaratan saya:
Solusinya hanya membutuhkan satu <div>
, yang saya sebut "aligner":
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
Trik ini bekerja dengan menciptakan tinggi, kurus div, yang mendorong teks dasar untuk bagian bawah wadah.
Berikut adalah contoh lengkap yang mencapai apa OP itu meminta. I've 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>
Cara modern untuk melakukan itu akan menggunakan flexbox. Lihat contoh di bawah ini. Anda don't bahkan perlu untuk membungkus Beberapa teks...
ke dalam tag HTML, karena teks ini diatas yang terkandung dalam wadah flex dibungkus dalam anonim flex item.
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>
Jika hanya ada beberapa teks dan anda ingin menyelaraskan vertikal ke 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>
display: flex;
align-items: flex-end;
Inline atau inline-block unsur-unsur yang dapat disejajarkan ke bawah dari elemen-elemen tingkat blok jika line-height orang tua/elemen blok yang lebih besar daripada inline elemen.*
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're dalam modus standar
Anda hanya dapat dicapai 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>
Jika anda memiliki beberapa, dinamis tinggi item, gunakan CSS menampilkan nilai-nilai dari tabel dan table-cell:
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;
}
I've menciptakan JSBin demo di sini: http://jsbin.com/INOnAkuF/2/edit
Demo juga memiliki contoh bagaimana untuk secara vertikal pusat menyelaraskan menggunakan teknik yang sama.
Berikut ini adalah solusi lain menggunakan flexbox tapi tanpa menggunakan flex-end untuk keselarasan bawah. Idenya adalah untuk mengatur margin-bottom
pada h1 untuk auto untuk mendorong tersisa konten 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>
Kita juga dapat melakukan hal yang sama dengan margin-top:auto
pada teks tetapi dalam hal ini kita perlu membungkusnya di dalam div
atau 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>
sangat sederhana, satu baris solusinya, adalah dengan menambahkan baris-heigth ke div, terbersit dalam pikiran bahwa semua div's teks akan pergi ke 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 praktis dan cepat solusi ketika anda hanya ingin teks di dalam div untuk pergi, jika anda perlu untuk menggabungkan gambar dan hal-hal, anda akan memiliki untuk kode yang sedikit lebih kompleks dan CSS responsif
Berikut ini's flexy cara untuk melakukannya. Tentu saja, hal's tidak didukung oleh IE8, sebagai pengguna diperlukan 7 tahun yang lalu. Tergantung pada apa yang anda perlu untuk mendukung, beberapa di antaranya dapat dilakukan jauh dengan.
Namun, akan lebih baik jika ada cara untuk melakukan hal ini tanpa sebuah wadah luar, hanya memiliki teks menyelaraskan diri dalam it's 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;
}
Anda don't perlu mutlak+relatif untuk ini. Hal ini sangat mungkin menggunakan posisi relatif untuk kedua wadah dan data. Ini adalah cara anda melakukannya.
Asumsikan tinggi dari data anda akan menjadi x
. Wadah adalah relatif dan footer juga relatif. Semua yang harus anda lakukan adalah menambahkan untuk data anda
bottom: -webkit-calc(-100% + x);
Data anda akan selalu berada di bagian bawah wadah. Bekerja bahkan jika anda memiliki wadah dengan tinggi yang dinamis.
HTML akan menjadi seperti ini
<div class="container">
<div class="data"></div>
</div>
CSS akan menjadi 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);
}
Semoga ini bisa membantu.
Saya menemukan solusi ini bassed pada default bootstrap mulai template
/* 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;
}
jika anda bisa mengatur ketinggian pembungkus div konten (#header-konten seperti yang ditunjukkan di lain's balasan), bukan 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;
}
#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>
Semua jawaban ini dan tidak bekerja untuk saya... saya'm tidak flexbox ahli, tapi ini cukup mudah untuk mencari tahu, itu adalah sederhana dan mudah untuk memahami dan menggunakan. Untuk memisahkan sesuatu dari yang lain dari konten, masukkan kosong div dan membiarkannya tumbuh untuk mengisi ruang.
``css .myContainer { tampilan: flex; height: 250px; flex-aliran: kolom; }
.pengisi { flex: 1 1; }
``
``html
Ini bereaksi seperti yang diharapkan ketika bagian bawah konten ini tidak berukuran tetap juga saat wadah ini tidak berukuran tetap.
Saya telah menemukan cara yang jauh lebih sederhana dari apa yang's telah disebutkan.
Mengatur ketinggian header div. Kemudian di dalamnya, gaya anda H1
tag sebagai berikut:
float: left;
padding: 90px 10px 11px
I'm bekerja pada sebuah situs untuk klien, dan desain membutuhkan teks yang berada di bawah tertentu div. I've mencapai hasil dengan menggunakan dua baris, dan itu bekerja dengan baik. Juga, jika teks tidak memperluas, padding masih akan tetap sama.