HTML

Question

我有一篇HTML有点费解的文章要写。

我需要一个内框，当达到特定大小时，它允许通过水平滚动显示其内容。

我附上了一个非常详细的架构，我希望它足够清楚。

我尝试了几种导致最大灾难的方法，因此我将不胜感激任何帮助。最好只是 css/html 没有 javascript.

Answer 1

给你： http://codepen.io/dherran/pen/KzEdZZ

.wrapper {
  width: 400px;
}

.left {
  float: left;
  height: 100px;
  max-width: calc(100% - 40px);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.right {
  float: left;
  width: 40px;
  height: 100px;
  background: black;
  color: white;
  text-align: center;
}

.box {
  display: inline-block;
  width: 40px;
  height: 100px;
  border: 1px solid white;
  background: blue;
}

<div class="wrapper">
  <div class="left">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="right">
    +
  </div>
</div>

HTML - 达到特定大小时滚动内框

HTML - Scrolling inner box when it reaches a specific size

css

scrollbar