swiper 多列布局中左侧内容溢出怎么解决？

Question

swiper 多列布局中左侧内容溢出怎么解决？

发布于
2018-01-07

更新于
2018-01-07

使用swiper时有没有遇到过，如果是多列布局，左侧会溢出，导致左侧容器中的内容下沉。如下图我使用的是display:table做了一个两列的布局，请无视container的大小，因为图片宽度设定的是640px，外面的table设定的是100%，所以才会这样。
图片描述
HTML结构

<div class="table">
    <div class="left">
        <ul>
            <li>这是测试文本</li>
            <li>这是测试文本</li>
            <li>这是测试文本</li>
            <li>这是测试文本</li>
            <li>这是测试文本</li>
            <li>这是测试文本</li>
            <li>这是测试文本</li>
            <li>这是测试文本</li>
            <li>这是测试文本</li>
        </ul>
     </div>
    <div class="container">
          <div id="full_feature" class="swipslider">
            <ul class="sw-slides">
             <li class="sw-slide">
                <img src="img/img-1.jpg" alt="Summer beach concept">
              </li>
              <li class="sw-slide">
                <img src="img/img-2.jpg" alt="Lang from Yie Ar Kung Fu">
              </li>       
             </ul>
          </div>      
      </div>
</div>

CSS样式

    .table{
        display:table;
        border:solid #ddd 1px;
        border-collapse:collapse;
        position:relative;
        width:100%;
    }
    .left{
        display:table-cell;
        border:solid #ddd 1px;
        position:relative;
        width:40%;
    }
    .container{
        display:table-cell;
        border:solid #ddd 1px;
        margin: 0 auto;
        max-width: 640px;
        position:relative;
    }
    .swipslider {
        position: relative;
        overflow: hidden;
        display: block;
        padding-top: 10%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; 
    }
    .swipslider ul.sw-slides {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        bottom: 0; 
        padding: 0;
        list-style: none;
        white-space: nowrap;
        font-size: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    .swipslider li.sw-slide {
        width: 100%;
        height: 100%;
        position: relative; 
        margin: auto;
        display: inline-block;
    }
    
    .swipslider .sw-slide > img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        max-height: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; 
    }
    .sw-next,.sw-prev {
        height: 50px;
        width: 50px;
        text-align: center;
        vertical-align: middle;
        position: absolute;
        line-height: 50px;
        font-size: 30px;
        color:#404040;
        font-weight:bold;
        top: 40%;
        border-radius:5px 0 0 5px;
        background-color: rgba(255, 255, 255, 0);
        text-decoration: none;
        transition: all .2s ease-out;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; 
    }
    .sw-next:hover,.sw-prev:hover {
        background-color: rgba(255, 255, 255, 0.74); 
        color:#333;
    }
    
    .sw-prev {
        right: 0; 
    }
    
    .sw-bullet {
        position: absolute; 
        /*position:relative;*/
        bottom: 15%;
        list-style: none;
        display: block;
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .sw-bullet li {
        width: 25px;
        height: 3px;
        background-color: rgba(160, 160, 160, 0.53);
        display: inline-block;
        cursor: pointer;
        transition: all .2s ease-out; 
    }
    .sw-bullet li:hover {
        background-color: rgba(255, 255, 255, 0.74); 
    }
    .sw-bullet li.active {
        background-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 2px rgba(160, 160, 160, 0.53); 
  }
    .sw-bullet li:not(:last-child) {
        margin-right: 5px; 
  }

试着把container设置为overflow:hidden 没用，而ul.sw-slides又不能设置overlow。
主要问题就是包裹li的ul的尺寸超出了，正好是一个图片的宽度。
图片描述