DIV 应在 overflow:hidden parent 内并排放置

Question

我正在尝试让多个 div 坐在 side-by-side 中 "overflow: hidden" parent。每个 child div 必须使用 parent 组件的 100% 宽度。这是为了在每个childdiv.

之间模拟"swiping"

一个 jsfiddle 来说明我的问题： https://jsfiddle.net/f83qeoxc/3/

<div class="wrapper">
    <div id="i1" class="item">
      item 1
    </div>
    <div id="i2" class="item">
      item 2
    </div>
    <div id="i3" class="item">
      item 3
    </div>
</div>

.wrapper{
  width: 200px;
  display: block;
  border: 1px solid black;
  overflow-x: hidden;
}

.item{

  display: ineline-block;
  float: left;
  width: 100%;
  border: 1px solid red;
  box-sizing: border-box;
}

Whosebug 已经有大量关于此类问题的 material。但是，我找不到涵盖以下细节的解决方案：

children 可能没有绝对定位，因为 parent 必须根据内容高度调整大小。
因为每个 child 都有 100% 的宽度，一次只能出现一个，其他的被 parent' overflow-x 属性

感谢您提出解决此问题的建议！

Answer 1

改变css

 .wrapper {
    border: 1px solid black;
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    width: 200px;

}

  .item {
    border: 1px solid red;
    box-sizing: border-box;
    display: inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
    width: 100%;
}

https://jsfiddle.net/f83qeoxc/10/

DIV 应在 overflow:hidden parent 内并排放置

DIVs should remain side by side within overflow:hidden parent

html

css

overflow

swipe