代码之家 › 专栏 › 技术社区 › Hayden

如何创建水平滚动卡片转盘?

css

Hayden · 技术社区 · 8 年前

我很难做到这一点。当屏幕调整大小时,这些卡片会自动换行。我曾尝试将溢出设置为隐藏,但没有帮助

这就是我目前的情况:

.showcase-section{
  height:40vh;
  text-align:center;
  padding:2rem;
}
.showcase__carousel--container{
  padding:2rem;
  height:30rem;
  width:65%;
  margin-left:auto;
  margin-right:auto;

}
.showcase__carousel--content{
  overflow:hidden;
}
.showcase__carousel--item{
  height:15rem;
  width:12rem;
  background-color:whitesmoke;
  border-radius:5px;
  box-shadow:0 0 3px rgba(0,0,0,.5);
  margin-left:2rem;
  margin-right:2rem;
  display:inline-block;
}

<section class="showcase-section">
<h2 style="font-size:3rem;">Showcase</h2>
<div class="showcase__carousel--container">
  <i class="fa fa-chevron-left" style="font-size:10rem; display:inline-block; float:left;"></i>
  <div class="showcase__carousel--content">
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>

  <i class="fa fa-chevron-right" style="font-size:10rem; display:inline-block; float:right;"></i>
  </div>
  </div>
</section>

2 回复 | 直到 8 年前

vrintle Jake 8 年前

你可以在css中使用FlexBox。下面的代码是 .showcase__carousel--content 将阻止向换行符添加内容。

你可以测试 dynamic nature here

.showcase__carousel--content {
    display: flex;
    flex-flow: row nowrap;
}

.showcase-section{
  height:40vh;
  text-align:center;
  padding:1rem;
}
.showcase__carousel--container{
  padding:1rem;
  height:30rem;
  width:65%;
  margin-left:auto;
  margin-right:auto;

}
.showcase__carousel--content{
  overflow:hidden;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.showcase__carousel--item{
  height:12rem;
  flex: 0 0 12rem;
  background-color:whitesmoke;
  border-radius:5px;
  box-shadow:0 0 3px rgba(0,0,0,.5);
  margin:0 1rem;
  display:inline-block;
}

<section class="showcase-section">
<h2 style="font-size:3rem;">Showcase</h2>
<div class="showcase__carousel--container">
  <i class="fa fa-chevron-left" style="font-size:10rem; display:inline-block; float:left;"></i>
  <div class="showcase__carousel--content">
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>

  <i class="fa fa-chevron-right" style="font-size:10rem; display:inline-block; float:right;"></i>
  </div>
  </div>
</section>