簡單地說：如果你有一個包含從0到9的垂直串列的父級div，你如何將該div精確地垂直集中在活動的子元素上？
< div className={`column currentValue${props。 integer[0]}`}>
<div className=" number columnValue_0">
0
</div>/span> 0
<div className="number columnValue_1">
1
</div> 1
<div className="number columnValue_2"/span>>
2
</div> 2
<div className="number columnValue_3"/span>>
3
</div> 3
<div className="number columnValue_4">/span>
4
</div> 4
<div className="number columnValue_5">
5
</div> 5
<div className="number columnValue_6"/span>>
6
</div> 6
<div className="number columnValue_7"/span>>
7
</div> 7
<div className="number columnValue_8"/span>>
8
</div>/span> 8
<div className="number columnValue_9"/span>>
9
</div>/span> 9
</div>
而根據被傳遞的數字，CSS是這樣的：
.currentValue0 {
margin-top: 24.4em;
}
.currentValue1 {
margin-top: 21em;
}
.currentValue2 {
margin-top: 20.1em;
}
.currentValue3 {
margin-top: 19em;
}
.currentValue4 {
margin-top: 15.9em;
}
.currentValue5 {
margin-top: 17em;
}
.currentValue6 {
margin-top: 11.6em;
}
.currentValue7 {
margin-top: 9.5em;
}
.currentValue8 {
margin-top: 7.4em;
}
.currentValue9 {
margin-top: 5.2em;
}
我在需要的地方使用了flexboxes來居中處理一切，但主要的問題是試圖實作這一點。使用'em'來動態地垂直對齊每一列，在我的電腦顯示幕之外的其他設備上并沒有給出準確的結果。
uj5u.com熱心網友回復：
一個使用ine-block和float的瘋狂想法。訣竅是使你的串列inline-block里面有float元素。
span class="hljs-selector-class">.container {
border:2px solid;
padding:50px;
text-align: center;
background: linear-gradient(red 0 0) 0 47%/100% 1px no repeat; /* 以說明基線*/。
}
.container .list {
display: inline-block;
border:1px solid;
margin:0 10px;
padding:2px.
}
.container .list * {
float: left;
clear:left;
}
.container .list .active{
float: none;
}<div class="container"> /span>
<div class="list">
<div>1</div>
<div>2</div>/span>
<div>3</div>/span>
<div>4</div>/span>
<div>5</div>/span>
<div class="active"/span>> 6</div>
<div>7</div>/span>
<div>8</div>/span>
<div>9</div>/span>
</div>/span>
<div class="list">
<div>1</div>
<div class="active"/span>>
<div>3</div>/span>
<div>4</div>/span>
<div>5</div>/span>
<div>6</div>/span>
<div>7</div>/span>
<div>8</div>/span>
<div>9</div>/span>
</div>/span>
<div class="list">
<div>1</div>
<div>2</div>/span>
<div>3</div>/span>
<div class="active"/span>> 4</div>
<div>5</div>/span>
<div>6</div>/span>
<div>7</div>/span>
<div>8</div>/span>
<div>9</div>/span>
</div>/span>
<div class="list">
<div>1</div>
<div>2</div>/span>
<div>3</div>/span>
<div>4</div>/span>
<div>5</div>/span>
<div>6</div>/span>
<div class="active"/span>> 7</div>
<div>8</div>/span>
<div>9</div>/span>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/331541.html
標籤：
上一篇：腳本中的相對地址不包括身份資訊