如何將div的內容與底部對齊

說我有以下css和html**：

#header

header content (one or multiple lines)

標頭部分的高度固定，但是標頭內容可能會更改。

我希望標題的內容與標題部分的底部垂直對齊，因此文字的最後一行「貼上」到標題部分的底部。

因此，如果只有一行文字，則將是：

-----------------------------
| header title||
|| header content (resulting in one line)
-----------------------------

如果有三行：

-----------------------------
| header title
|| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

如何在css中完成此操作？

如果父/塊元素的行高大於行內元素的行高，則可以將行內或行內塊元素與塊級元素的底部對齊。*

標記：

css：

h1.alignbtm h1.alignbtm span

*確保您處於標準模式

似乎正在工作：

#content

使用更少的**使解決css難題更像是編碼，而不是……我只是喜歡css。當您僅需更改乙個引數即可更改整個布局（不破壞它：）時，這是一種真正的榮幸。

嘗試：

div.myclass

嘗試更改％進行修復。例如：120％或90％...等

我剛剛為客戶提供的**要求頁尾文字是乙個高框，底部是我用簡單的填充即可實現的文字，該文字應適用於所有瀏覽器。

some text here

#footer

如果您有多個動態高度專案，請使用table和table-cell的css顯示值：

的html

my bottom aligned div 1 my bottom aligned div 2 my bottom aligned div 3

的css

html,
body 
.valign 
.valign > div 
.valign.bottom > div

我在這裡建立了乙個jsbin演示： http :

該演示還提供了乙個示例，說明如何使用相同的技術垂直居中對齊。

如果您可以設定內容的環繞div的高度（如其他答覆中所示的＃header-content）而不是整個#header的高度，也許您也可以嘗試以下方法：

的html

first line of header text second line of header text third, last line of header text

的css

#header-content #header-content::before #header-content span

顯示在codepen上

經過一段時間的努力，我終於找到了可以滿足我所有要求的解決方案：

該解決方案只需要乙個，我稱之為「 aligner」：

的css

.bottom_aligner

html

... your content here ...

此技巧通過建立乙個又高又瘦的div來起作用，該div將文字基線推到容器的底部。

這是乙個完整的示例，可以實現op的要求。我將「 bottom_aligner」設定為紅色和紅色，僅用於演示目的。

css：

.outer-container .top-section .bottom-section .bottom-aligner .bottom-content .top-content

html：

this text is on top. i like it here at the bottom.

如果您不擔心舊版瀏覽器，請使用flexbox。

父元素需要將其顯示型別設定為flex

div.parent

然後，將子元素的align-self設定為flex-end。

span.child

這是我曾經學習的資源： http :

2015解決方案

別客氣

您不需要絕對+相對。使用容器和資料的相對位置很有可能。這就是你的做法。

假設您的資料高度將為x。您的容器是相對的，頁尾也相對。所有您需要做的就是新增到您的資料中

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

您的資料將始終位於容器的底部。即使您的容器具有動態高度也可以使用。

html將像這樣

css將像這樣

.container .data

這裡的例子

希望這可以幫助。

似乎正在工作：

html：我在最底層

css：

h1.alignbtm h1.alignbtm span

這是靈活的方法。當然，ie8不支援它，因為使用者7年前就需要它。根據您需要支援的內容，其中一些可以取消。

不過，如果有一種方法可以在沒有外部容器的情況下做到這一點，那將是很好的，只需使文字在其自身內部對齊即可。

#header

我發現此解決方案基於預設的引導啟動模板

/* html */
this is a description at the bottom too
/* css */
display: table;
width: 100%;
height: 100%; /* for at least firefox */
min-height: 100%;
}.content_floating

現代的方法是使用flexbox。請參見下面的示例。您甚至不需要將some text...包裝到任何html標記中，因為直接包含在flex容器中的文字被包裝在匿名flex專案中。

header  h1

如果您想知道您的**可能無法在ie上執行，請記住在頂部新增doctype標記。這對於在ie上工作至關重要。同樣，這應該是第乙個標籤，並且上面沒有任何內容。

我使用這些屬性，並且有效！

#header

如何將DIV層放在flash上面

一 ie瀏覽器下可用二 firefox下可用關於wmode屬性資料可選允許使用 internet explorer 4.0 中的透明 flash 內容絕對定位和分層顯示功能。此標記屬性僅在帶有 flash player activex 控制項的 windows 中有效。opaque 使應...

如何將Ubuntu左邊的面板放到底部

直入主題，有些人不喜歡ubuntu預設的面板在左邊筆者就是囧我還是喜歡將面板放入到桌面的底部，這樣更符合自己的使用習慣，但是ubuntu預設是不支援的，需要通過配置工具來配置。這個時候我們需要借助第三方軟體 unity tweak tool 開啟終端，通過命令進行安裝unity tweak t...

如何將EXCEL內容匯入mysql

方法很多，不過建議你先看看mysql的開發文件，裡面寫的很詳細的，如果你懶得看，可以看下面的 1.有個軟體php excel parser pro v4.2可以 2.可將excel存成csv格式。然後通過phpmyadmin倒入mysql 3.先導入access中,再弄到mysql中,或者自己寫程式...

如何將div的內容與底部對齊

如何將DIV層放在flash上面

如何將Ubuntu左邊的面板放到底部

如何將EXCEL內容匯入mysql

相關推薦