【问题标题】:Slider component with more than one row多于一排的滑块组件
【发布时间】:2016-07-23 19:29:06
【问题描述】:

我正在尝试创建滑块。现在我有这样的东西:

一切都在一行中,但我想要类似的东西:

因此我希望能够在滑块中设置多行。

更新

这是jsfiddle

【问题讨论】:

  • 那么你可以追加另一个innerDiv,对吧?
  • 我尝试动态进行。
  • 动态意味着如何?就像在按钮单击或什么上附加一行? innerDiv 元素中应该有多少个 div?
  • 既然做成了组件,为什么不用两个滑块呢?数据源一样吗?
  • 我更新了我的问题

标签: javascript html css reactjs


【解决方案1】:

用样式添加<div class="row"></div>

.row {
  width: 100%;
  clear: both;
}

应该是这样的

<div class="outterDiv">
  <div class="innerDiv">
    <div class="row">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
    </div>
    <div class="row">
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12</div>
    </div>
  </div>
</div>

更新了 jsfiddle https://jsfiddle.net/69z2wepo/50082

【讨论】:

  • 这还不错。我想到了别的东西,但你的解决方案也很好。我怎样才能接受你的回答?
  • 用 jsfiddle 更新你的第一个答案。
猜你喜欢
  • 1970-01-01
  • 2015-07-17
  • 2012-12-03
  • 1970-01-01
  • 1970-01-01
  • 2020-01-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多