|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于CSS怎么實現底部對齊？css實現底部對齊的三種方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。CSS實現底部對齊效果因公司業務要求需要實現如下圖中紅色區域的效果：
效果說明： 1、紅色區域數據需要倒排（即從底部開始數，數字為1、2、3、4、5），并且顯示在最底部 使用flex布局實現<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
width: 300px;
height: 500px;
margin: 10px auto;
border: 1px solid #f60;
color: #fff;
}
.top,
.bottom{
height: 50%;
padding: 20px;
}
.top{
background-color: #da2e22;
}
.top>ul{
width: 100%;
height: 100%;
overflow: auto;
}
.bottom{
overflow: auto;
background-color: #1e1e1e;
}
</style><div class="container">
<div class="top">
<ul style="padding-top: 104px;">
<li>我是第1個li元素</li>
<li>我是第2個li元素</li>
<li>我是第3個li元素</li>
<li>我是第4個li元素</li>
<li>我是第5個li元素</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>我是第1個li元素</li>
<li>我是第2個li元素</li>
<li>我是第3個li元素</li>
<li>我是第4個li元素</li>
<li>我是第5個li元素</li>
</ul>
</div>
</div>使用flex布局是目前最好的解決辦法，子元素布局還是按照1、2、3、4、5這樣的順序進行布局，瀏覽器器在渲染時會自動反轉過來，并且滾動條也會反轉過來，即自動定位到最底部。但是IE10目前為止還不支持~，所以在我做的這個項目中是用不了了，只能另辟蹊徑。 使用padding-top實現<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
width: 300px;
height: 500px;
margin: 10px auto;
border: 1px solid #f60;
color: #fff;
}
.top,
.bottom{
height: 50%;
padding: 20px;
}
.top{
background-color: #da2e22;
}
.top>ul{
width: 100%;
height: 100%;
overflow: auto;
}
.bottom{
overflow: auto;
background-color: #1e1e1e;
}
</style><div class="container">
<div class="top">
<ul style="padding-top: 104px;">
<li>我是第1個li元素</li>
<li>我是第2個li元素</li>
<li>我是第3個li元素</li>
<li>我是第4個li元素</li>
<li>我是第5個li元素</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>我是第1個li元素</li>
<li>我是第2個li元素</li>
<li>我是第3個li元素</li>
<li>我是第4個li元素</li>
<li>我是第5個li元素</li>
</ul>
</div>
</div>使用padding-top是最容易想到的一種實現方式，但它無法用純css實現，它還必須使用js進行計算才可以。我在項目中剛開始就是padding-top+js計算來實現的，這種方式實現起來就是感覺不爽， websocket每推送一條數據過來就要進行計算。那么還有沒有更好的辦法呢？答案是肯定有的，在css世界中總有意想不到的驚喜，關鍵是內功要強。 使用table-cell來實現<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
width: 300px;
height: 500px;
margin: 10px auto;
border: 1px solid #f60;
color: #fff;
}
.top,
.bottom{
height: 50%;
padding: 20px;
overflow: auto;
}
.top{
background-color: #da2e22;
}
.top-container{
display: table;
width: 100%;
height: 100%;
}
.top-container>ul{
display: table-cell;
vertical-align: bottom;
width: 100%;
height: 100%;
}
.bottom{
background-color: #1e1e1e;
}
</style><div class="container">
<div class="top">
<div class="top-container">
<ul>
<li>我是第1個li元素</li>
<li>我是第2個li元素</li>
<li>我是第3個li元素</li>
<li>我是第4個li元素</li>
<li>我是第5個li元素</li>
</ul>
</div>
</div>
<div class="bottom">
<ul>
<li>我是第1個li元素</li>
<li>我是第2個li元素</li>
<li>我是第3個li元素</li>
<li>我是第4個li元素</li>
<li>我是第5個li元素</li>
</ul>
</div>
</div>使用table-cell來實現底部對齊目前是最后的解決方案了，并且它還兼容ie8。底部對齊問題解決了，"滾動條需要拉到最底部"這個問題使用table-cell是無法實現的，沒辦法最后只有使用js去控制了，不知道有哪位大神有其他辦法沒~ 以上就是CSS怎么實現底部對齊？css實現底部對齊的三種方法的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
