[英]Scroll by x-axis
如何強制將滾動條添加到div的底部(x軸),使所有正方形都向右移動?
CSS:
#videowall-grid{
width:700px;
border:1px dotted #dddddd;
display: none;
margin: 5px auto;
padding: 5px;
text-align:center;
}
#videowall-grid .videowall-row{
border: 1px solid red;
overflow-y: auto;
width: 700px;
height: 120px;
}
#videowall-grid .videowall-square{
padding: 5px;
margin: 5px;
border: 1px dashed #dddddd;
width: 100px;
height: 100px;
display: inline-block;
vertical-align:top;
}
HTML:
<div id="videowall-grid" style="display: block;">
<div class="videowall-row">
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_2">sadfasfasdafsdasdfsafsadfsafsfadfasdfasfasdfasf</div>
<div class="videowall-square" id="1_3">adfasfdasdf channel 1 camera with a very very very</div>
<div class="videowall-square" id="1_4">asdfadsffasdsf</div>
</div>
<div class="videowall-row">
<div id="2_1" class="videowall-square">asdfasd cam1</div>
<div id="2_2" class="videowall-square">asdfasd cam2</div>
<div id="2_3" class="videowall-square">asdfasd cam4</div>
<div id="2_4" class="videowall-square">button</div>
</div>
<div class="videowall-row">
<div id="3_1" class="videowall-square"></div>
<div id="3_2" class="videowall-square">button</div>
<div id="3_3" class="videowall-square">button</div>
<div id="3_4" class="videowall-square">button</div>
</div>
</div>
看起來像誰想要JS解決方案。 但是您是否考慮過使用http://flesler.blogspot.com/2007/10/jqueryscrollto.html
會使事情變得容易得多。
overflow: auto;
到正方形,以便溢出的文本留在里面。 white-space: nowrap;
在行上強制將正方形放在同一行上。 line-height: 100px;
或者您可以將填充設置為等於高度(100/2 = 50)的padding: 50px 0;
使文本垂直居中(在注釋后編輯) 的CSS
#videowall-grid{
width:700px;
border:1px dotted #dddddd;
display: none;
margin: 5px auto;
padding: 5px;
text-align:center;
}
#videowall-grid .videowall-row{
border: 1px solid red;
overflow-y: auto;
width: 700px;
height: 120px;
white-space: nowrap;
}
#videowall-grid .videowall-square{
padding: 5px;
margin: 5px;
border: 1px dashed #dddddd;
width: 100px;
height: 100px;
display: inline-block;
vertical-align:top;
overflow: auto;
}
的HTML
<div id="videowall-grid" style="display: block;">
<div class="videowall-row">
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_1">afasfasdfas</div>
<div class="videowall-square" id="1_2">sadfasfasdafsdasdfsafsadfsafsfadfasdfasfasdfasf</div>
<div class="videowall-square" id="1_3">adfasfdasdf channel 1 camera with a very very very</div>
<div class="videowall-square" id="1_4">asdfadsffasdsf</div>
</div>
<div class="videowall-row">
<div id="2_1" class="videowall-square">asdfasd cam1</div>
<div id="2_2" class="videowall-square">asdfasd cam2</div>
<div id="2_3" class="videowall-square">asdfasd cam4</div>
<div id="2_4" class="videowall-square">button</div>
</div>
<div class="videowall-row">
<div id="3_1" class="videowall-square"></div>
<div id="3_2" class="videowall-square">button</div>
<div id="3_3" class="videowall-square">button</div>
<div id="3_4" class="videowall-square">button</div>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.