html - span對齊 - 靠左對齊




如何將div的內容與底部對齊? (16)

假設我有以下CSS和HTML代碼:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

標題部分固定高度,但標題內容可能會更改。 我希望標題的內容與標題部分的底部垂直對齊,因此最後一行文本“粘”到標題部分的底部。

所以如果只有一行文字,它會是這樣的:

-----------------------------
| 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中完成?


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

不客氣


一個完美的跨瀏覽器的例子可能是這裡的一個例子:

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

這個想法既是為了顯示底部的div,也是要讓它堅持下去。 通常,簡單的方法將使粘性div與主要內容一起向上滾動。

以下是一個完全有效的最小示例。 請注意,不需要div嵌入技巧。 許多BR只是強迫一個滾動條出現:

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

如果您想知道您的代碼可能不適用於IE,請記住在頂部添加DOCTYPE標籤。 這對IE來說至關重要。 此外,這應該是第一個標籤,沒有什麼應該出現在它上面。


似乎工作:

HTML:我處於最底層

CSS:

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

似乎工作:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: [email protected]_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;
}

使用可以解決CSS難題,比編碼更像...我只是喜歡CSS。 當你可以改變整個佈局(而不會破壞:),只需更改一個參數,這真是一件愉快的事情。


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

正如cletus指出的那樣,您需要確定標題內容才能完成這項工作。

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

嘗試:

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

嘗試改變%來修復它。 例如:120%或90%...等。


如果你可以設置內容的包裝div的高度(#header-content如其他人的回復中所示),而不是整個#header,也許你也可以嘗試這種方法:

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

在codepen上顯示



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

標記:

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

*確保您處於標準模式


我使用這些屬性,它的工作原理!

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

我發現這個解決方案基於默認的引導啟動模板

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

}

我知道這已經過了2年多了,但我已經設計了一種比剛才提到的更簡單的方法。

設置標題div的高度。 然後在裡面,按如下方式設計你的H1標籤:

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

我正在為客戶設計一個網站,並且設計要求文本位於特定div的底部。 我已經使用這兩行完成了結果,並且工作正常。 另外,如果文本擴展,則填充將保持不變。


相對+絕對定位是你最好的選擇:

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

但是你可能會遇到問題。 當我嘗試它時,出現內容下方的下拉菜單出現問題。 這只是不漂亮。

老實說,對於垂直居中問題,以及任何與物品的垂直對齊問題都不是固定的高度,只是使用表格更容易。

例如: 你可以在不使用表的情況下做這個HTML佈局嗎?


這是另一種使用flexbox但不使用flex-end進行底部對齊的解決方案。 我們的想法是將h1上的margin-bottom設置為自動將剩餘內容推到底部:

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

我們也可以使用margin-top:auto來處理文本,但在這種情況下,我們需要將其封裝在divspan

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


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


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




vertical-alignment