我正在開發一款紙牌游戲，如果窗口寬度不夠寬，則需要能夠滾動所有紙牌。HTML： <div id="hand"> <div class="wrapper"> <div class="card"> <!-- Cards content --> </div> <div class="card"> <!-- Cards content --> </div> <div class="card"> <!-- Cards content --> </div> <!-- Repeat until 20 cards --> </div> </div>社會保障體系 div#hand { position: fixed; bottom: -200px; left: 0; width: 100vw; height: auto; display: flex; justify-content: center; overflow-x: auto; overflow-y: visible; >div.wrapper { display: flex; flex-direction: row; margin-left: 200px; margin-right: 200px; div.card { cursor: pointer; position: relative; width: 230px; height: 350px; margin: 0; border-radius: 3px; border-style: dotted; border-width: 5px; border-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); margin-top: 60px; bottom: 0; display: inline-block; transition: 0.4s; &:not(:first-child) { margin-left: -160px; } &:hover:not(:last-child) { margin-right: 160px; } &:hover { bottom: 60px; } } } }這會導致呈現以下結果： 這很酷，但當我縮小瀏覽器寬度時，問題就出現了： 我目前一直滾動到左側，但請注意第一張圖片上的編號為 1 的卡片是如何不可見的。如果我向右滾動，最后一張卡片將毫無問題地顯示： 有沒有辦法讓滾動條真正滾動瀏覽每張卡片？我嘗試向左右添加邊距或向父 div 添加填充，但似乎沒有任何效果：c提前感謝您的幫助^^
1 回答
PIPIONE
TA貢獻1829條經驗 獲得超9個贊
我找到了您問題的答案，它與您的原始代碼具有相同的風格。我添加了一些演示號碼進行測試。
div#hand {
position: fixed;
bottom: -200px;
left: 0;
width: 100vw;
height: auto;
display: flex;
justify-content: center;
overflow-x: auto;
overflow-y: auto;
}
div.wrapper {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.card {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div#hand > div.wrapper div.card {
cursor: pointer;
position: relative;
width: 230px;
height: 350px;
margin: 0;
border-radius: 3px;
border-style: dotted;
border-width: 5px;
border-color: #fff;
background-color: black;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
margin-top: 60px;
bottom: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.4s;
}
div#hand > div.wrapper div.card:not(:first-child) {
margin-left: -160px;
}
div#hand > div.wrapper div.card:hover:not(:last-child) {
margin-right: 160px;
}
div#hand > div.wrapper div.card:hover {
bottom: 60px;
}
Code
<div id="hand">
<div class="wrapper">
<div class="card">
<h2>1</h2>
</div>
<div class="card">
<h2>2</h2>
</div>
<div class="card">
<h2>3</h2>
</div>
<div class="card">
<h2>4</h2>
</div>
<div class="card">
<h2>5</h2>
</div>
<div class="card">
<h2>6</h2>
</div>
<div class="card">
<h2>7</h2>
</div>
<div class="card">
<h2>8</h2>
</div>
<div class="card">
<h2>9</h2>
</div>
<div class="card">
<h2>10</h2>
</div>
<div class="card">
<h2>11</h2>
</div>
<div class="card">
<h2>12</h2>
</div>
<div class="card">
<h2>13</h2>
</div>
<div class="card">
<h2>14</h2>
</div>
<div class="card">
<h2>15</h2>
</div>
<div class="card">
<h2>16</h2>
</div>
<div class="card">
<h2>17</h2>
</div>
<div class="card">
<h2>18</h2>
</div>
<div class="card">
<h2>19</h2>
</div>
<div class="card">
<h2>20</h2>
</div>
</div>
</div>
</div>
- 1 回答
- 0 關注
- 170 瀏覽
添加回答
舉報
0/150
提交
取消