用于卡片div的HTML水平滚动条

时间：2017-11-27 06:59:07

标签： html css html5

我想为卡片类实现一个水平滚动条，如本例所示。我试过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>

4 个答案:

答案 0 :(得分：4)

通过添加这些属性来修改您的.row课程，或者如果您不想篡改.row课程，请创建一个新课程。

.row {
  display: flex;
  overflow-x: scroll;
}

有关Flex的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我将上述属性作为内联样式添加到HTML代码段<div class="row" style="display: flex; overflow-x: scroll">

＆＃13;
＆＃13; 
.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
}

.card > img {
  margin-bottom: .75rem;
}

.card-text {
  font-size: 85%;
}
＆＃13; 
<div class="container">
  <div class="row" style="display: flex; overflow-x: scroll">
    <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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

使用FlexBox制作水平滚动条非常容易。如果父级为display: flex;，则float中的effect将不会child element。检查代码段的工作原理。

.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;
}

.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>

答案 2 :(得分：1)

我添加了.card-wrap类来包装card并添加了css：

.card-wrap {
  overflow-x: scroll;
  display: flex;
}


.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
}
.card > img {
  margin-bottom: .75rem;
}
.card-text {
  font-size: 85%;
}
.card-wrap {
  overflow-x: scroll;
  display: flex;
}
<div class="container">
  <div class="row">
    <div class="card-wrap">
      <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>
</div>

答案 3 :(得分：0)

我修改了我的代码.overlay-content类，并添加了.overlay-content的css 

<!-- language: lang-html -->

<div class="container">
    <div class="row">
    <div class="overlay-content">
    <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/200x200" >
        < 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/200x200" >
        < 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/200x200" >
        < 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>
</div>

<!-- end snippet -->
相关问题
最新问题