我想为卡片类实现水平滚动条,如本例所示。我试过 overflow-x:scroll
但运气不好。谁能建议我如何实现滚动条以使卡片水平流动?
谢谢
.card {
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
}
.card > img {
margin-bottom: .75rem;
}
.card-text {
font-size: 85%;
}
<div class="container">
<div class="row">
<div class="card">
<img src="http://placehold.it/200x150">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img src="http://placehold.it/200x150">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img src="http://placehold.it/200x150">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img src="http://placehold.it/200x150">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
最佳答案
使用 FlexBox
制作水平滚动条非常容易。当父级为 display: flex;
时,float
在 child element
中将没有effect
。检查片段它是如何工作的。
.row{
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.card {
/*float: left;*/
max-width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
flex-basis: 33.333%;
flex-grow: 0;
flex-shrink: 0;
}
.card > img {
margin-bottom: .75rem;
width: 100%;
}
.card-text {
font-size: 85%;
}
<div class="container">
<div class="row">
<div class="card">
<img src="https://picsum.photos/300/200">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img src="https://picsum.photos/300/200">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img src="https://picsum.photos/300/200">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img src="https://picsum.photos/300/200">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
关于css - 用于卡片 div 的 HTML 水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47505426/