一些小東西趋观,記下垃沦。
想實現(xiàn)效果:p高度由內容撐開,內容為動態(tài)數(shù)據(jù)(此處為靜態(tài)不一致內容坤学,代替數(shù)據(jù)庫取到的數(shù)據(jù))的情況下達到p標簽始終同最高的高度一致疯坤,并且內容居中顯示。
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.Wd{
width: 400px;
/*塊級元素內垂直居中*/
align-items:center;
/*伸縮盒 */
display: -webkit-flex;
/*塊級元素內水平居中*/
justify-content:center;
}
div{
border: 1px solid orange;
width: 410px;
margin-bottom: 10px;
margin-left: 200px;
}
</style>
</head>
<body>
<div>
<p class="Wd">今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四</p>
</div>
<div>
<p class="Wd">今天是周四今天是周</p>
</div>
<div>
<p class="Wd">今天是周四今天今周四今天是周四</p>
</div>
<div>
<p class="Wd">今天是周四今天是四今天是周四</p>
</div>
<div>
<p class="Wd">今天是周四今天周四今天今天是周四今天是周四</p>
</div>
<div>
<p class="Wd">今天是周四今天是周四今天是周四</p>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
var getH = document.getElementsByClassName("Wd");
var list = [];
for(var i = 0 ; i < getH.length; i++){
list.push(getH[i].clientHeight); //獲取每個p標簽的高度
}
list.sort(function(a,b){
return b-a;
})
var large = list[0];
$("p").css({
"height":large
})
</script>
</html>