默希文翻譯
這是第二個內層div，一樣偽裝成td，如斯才可使文字置底 (若是沒有偽裝成td情勢的div，vertical-align是無效的)，但是你會發現到，div偽裝成td只會不息的並排，並沒有td的屬性，所以不會垂直分列，也不會跨欄跨列(IE今朝不支援display:table-cell;等指令)
FM:http://www.wretch.cc/blog/violet30/7822116
vertical-align: bottom
display: table-cell
如斯一來，要怎麼樣才可以像這樣使欄位垂直擺列呢？答案就是在這個div外面再包一層display的屬性為table-row，偽裝成tr；這個例子合適用在統一欄裡想要上方div文字垂直置中，與下方div文字垂直置底的時刻
<div style="text-align: center; display: table-cell; border: 1px solid black; width: 50%; height: 50%; padding: 1em;">這是第一個內層div，我們可以用text-align來水平置中文字，並偽裝成td</div>
</div>
<div style="display: table; padding: 1em; height: 500px; border: 1px solid black;">
<div style="display: table-cell; text-align: center; vertical-align: bottom; border: 1px solid black; height: 100px; width: 100%; padding: 1em;">至於要怎麼跨欄呢? 很簡單，相信大師都已經猜到了，只要跳出上方最外層的div，再寫一個div就好了咩~</div>
至於要怎麼跨欄呢? 很簡單，相信大師都已經猜到了，只要跳出上方最外層的div，再寫一個div就好了咩~
<div style="display: table-cell; border: 1px solid black; padding: 1em;">如此一來，要怎麼樣才可以像這樣使欄位垂直擺列呢？謎底就是在這個div外面再包一層display的屬性為table-row，偽裝成tr；這個例子合適用在統一欄裡想要上方div文字垂直置中，與下方div文字垂直置底的時刻</div>
<div style="display: table-row;">
用text-align來水平置中文字，並偽裝成td
<div style="display: table-cell; vertical-align: bottom; border: 1px solid black; padding: 1em;">這是第二個內層div，一樣偽裝成td，如斯才可使文字置底 (若是沒有偽裝成td情勢的div，vertical-align是無效的)，但是
最外層:display: table
</div>
首先，華頓翻譯公司們先包一層外圈，並指定一個高度，因為div並沒有自己的屬性，所以就像水一樣的柔軟，所以若是要仿制table的話，必須先將div用display指定成table的情勢，也就是偽table，別的加上邊線是為了讓大師可以看得加倍清楚div的位置
|
vertical-align: bottom 來自: http://blog.xuite.net/s925517/mylife/85366144-%5BCSS%5Dtable%E8%88%87div%E4%BD%BF%E7%94%A8vertical-a有關各國語文翻譯公證的問題歡迎諮詢華頓翻譯公司02-77260932 文章標籤
全站熱搜
|
留言列表
