怎么保證圖片輪播的外層盒子不換行而且寬度自適應(yīng)呢？不考慮用js,求指點！

你現(xiàn)在的需求是想寫一個輪播圖，然后隨時可以向輪播圖中添加任意多個圖片？還是有其它需求，兼容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>

內(nèi)層總寬度是需要js計算的。

移動端有輪播圖的插件你可以找一找，基本的思路是：
viewbox 寬度自適應(yīng)，overflow hidden，imgsboxs寬度足夠大，imgblock 使用float堆積，也可以使用inlineblock，但是ib在低版本IE下存在兼容問題自己要做兼容，左右移動imgsbox可以使用css3屬性 translateX性能會好些，也可以使用transition: left ease-out 1s，如果需要兼容IE678，就用js動畫方案吧，requestAnimationFrame，

.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>