我有一张卡片列表,其中每张卡片都是一个 div
并且有一个 box-shadow
。 Cards 容器是一个可滚动的 div。我不知道如何实现在左侧和右侧保持阴影,请查看屏幕截图。卡片容器 .content
需要与页脚内容 .footer
对齐。
.page{
display: flex;
flex-direction: column;
width: 600px;
background: white;
padding: 100px;
}
.content {
overflow: auto;
display: flex;
background: white;
padding-top: 50px;
padding-bottom: 50px;
/* padding-left: 50px;
padding-right: 50px;
margin-left: -50px;
margin-right: -50px; */
}
.content > * + * {
margin-left: 20px;
}
.card{
overflow: visible;
padding: 0 50px;
width: 220px;
background: #dde2eb;
box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}
.footer{
background: yellow;
}
<div class="page">
<div class="content">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
</div>
<div class="footer">
Footer placeholder
</div>
</div>
答案 0 :(得分:1)
.page{
display: flex;
flex-direction: column;
width: 600px;
background: white;
padding: 100px;
}
.content {
overflow: auto;
display: flex;
background: white;
padding-top: 50px;
padding-bottom: 50px;
/* padding-left: 50px;
padding-right: 50px;
margin-left: -50px;
margin-right: -50px; */
}
.card {
padding: 0 10px;
}
.card-inner{
overflow: visible;
padding: 0 50px;
width: 220px;
background: #dde2eb;
box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}
.footer{
background: yellow;
padding: 0 10px;
}
<div class="page">
<div class="content">
<div class="card">
<div class="card-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
</div>
<div class="card">
<div class="card-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
</div>
<div class="card">
<div class="card-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
</div>
<div class="card">
<div class="card-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
</div>
</div>
<div class="footer">
Footer placeholder
</div>
</div>
答案 1 :(得分:1)
更新您的代码,如下所示:
.page{
max-width: 600px;
background: white;
padding: 50px;
}
.content {
overflow: auto;
display: flex;
background: white;
padding: 50px 0;
}
/* added */
.content::before,
.content::after {
content:"";
min-width:30px;
}
/**/
.content > * + * {
margin-left: 20px;
}
.card{
padding: 0 50px;
width: 220px;
background: #dde2eb;
box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}
.footer{
background: yellow;
margin:0 30px; /* added */
}
<div class="page">
<div class="content">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
</div>
<div class="footer">
Footer placeholder
</div>
</div>
如果你调整滚动条会更好看(仅在 webkit 浏览器上可用)
.page{
max-width: 600px;
background: white;
padding: 50px;
}
.content {
overflow: auto;
display: flex;
background: white;
padding: 50px 0;
}
/* added */
.content::before,
.content::after {
content:"";
min-width:30px;
}
/**/
.content > * + * {
margin-left: 20px;
}
.card{
padding: 0 50px;
width: 220px;
background: #dde2eb;
box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}
.footer{
background: yellow;
margin:0 30px; /* added */
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background:linear-gradient(to right,transparent 30px,grey 0 calc(100% - 30px), transparent 0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
<div class="page">
<div class="content">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
</div>
<div class="footer">
Footer placeholder
</div>
</div>
答案 2 :(得分:0)
您可以通过简单地向容器添加填充来实现它。
.page{
display: flex;
flex-direction: column;
width: 600px;
background: white;
padding: 100px;
}
.content {
overflow: auto;
display: flex;
background: white;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
/* padding-left: 50px;
padding-right: 50px;
margin-left: -50px;
margin-right: -50px; */
}
.content > * + * {
margin-left: 20px;
}
.card{
overflow: visible;
padding: 0 50px;
width: 220px;
background: #dde2eb;
box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}
.footer{
background: yellow;
}
<div class="page">
<div class="content">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
</div>
</div>
<div class="footer">
Footer placeholder
</div>
</div>