Question

我对编码相对较新，我希望重新创建我在Photoshop中设计的http://prntscr.com/e73jze。有人能给我最简单的方法吗？

非常感谢

Answer 1

根据您附带的照片，完全匹配此设计的样式将不会有一个简单的答案。要制作一个带有可水平滚动内容的简单<div>，您可以执行以下操作：

＆＃13;

#wrapper {
  display:flex;
  flex-wrap:none;
  height:200px;
  width:100%;
  background-color:black;
  overflow-x: scroll;
  }

.photo-box {
  flex:0 0 auto;
  margin:25px;
  background-color:white;
  width:300px;
  height:150px;
  }

＆＃13;

<div id='wrapper'>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
</div>

＆＃13;

然而，滚动条之类的样式并不那么简单，需要更多的标记。

使用带有overflow:scroll的div作为起始位置来获取滚动框，您可以找到用于制作自定义滚动条的{jQuery插件{。{3}}。

Answer 2

只需插入自己的图片并设置滚动条样式。

＆＃13;

#scrollable {
  width: 500px;
  height: auto;
  margin: 100px auto;
  overflow: auto;
  white-space: nowrap;
}

＆＃13;

<div id="scrollable">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
</div>

＆＃13;

如何创建可滚动的div？

2 个答案: