怎么保证图片轮播的外层盒子不换行而且宽度自适应呢？不考虑用js,求指点！

Question

如题，要做的是图片左右移动切换，自己写的js,但是怎么保证图片的盒子宽度自适应，而且不换行呢？而且还有兼容ie的！
看图：

Answer 1

你现在的需求是想写一个轮播图，然后随时可以向轮播图中添加任意多个图片？还是有其它需求，兼容ie，指的是ie几？下面我也写了一点代码

css:

 .warp{
         width:100%;
         overflow: hidden;
      }
      .warpDiv{
         white-space:nowrap;  

      }
      .blockDiv{
          display: inline-block;
          width:400px;
          height:100px;
          background: red;
          font-size: 40px;
          text-align: center;
          line-height: 100px;
          color:#fff;
      }

html:

<div class="warp">
     <div class="warpDiv">
        <div class="blockDiv">111</div>
        <div class="blockDiv">222</div>
        <div class="blockDiv">333</div>
        <div class="blockDiv">444</div>
        <div class="blockDiv">555</div>
        <div class="blockDiv">666</div>
        <div class="blockDiv">777</div>
    </div>
 </div>

Answer 2

.box{
    width：800px;
    overflow: hidden;
    
}
            ul{
                list-style: none;
                white-space: nowrap;
            }
            ul li{
                display:inline-block; 
                _zoom:1;
                *display:inline;
            }
    <div class="box">
            <ul class="ul1">
                <li><img src="img/451e0f1.png"/></li>
                <li><img src="img/4caa0aa.png"></li>
                <li><img src="img/123.jpg"></li>
                <li><img src="img/2e0f7f7.png"/></li>
                <li><img src="img/2e0f7f7.png"/></li>
                <li><img src="img/2e0f7f7.png"/></li>
                <li><img src="img/2e0f7f7.png"/></li>
            </ul>
        </div>

Answer 3

移动端有轮播图的插件你可以找一找，基本的思路是：
viewbox 宽度自适应，overflow hidden，imgsboxs宽度足够大，imgblock 使用float堆积，也可以使用inlineblock，但是ib在低版本IE下存在兼容问题自己要做兼容，左右移动imgsbox可以使用css3属性 translateX性能会好些，也可以使用transition: left ease-out 1s，如果需要兼容IE678，就用js动画方案吧，requestAnimationFrame，

Answer 4

内层总宽度是需要js计算的。