Question

我正在尝试制作一个水平可滚动的div，里面有3个子分区。子部门每个都有4个图像缩略图。我无法使这个布局工作。

HTML

<div class="col-xs-12">
    <div class="canvas-scrollable">
        <ul class="list-inline clearfix">
            <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
           <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
            <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
        </ul>
    </div>
</div>

CSS

.canvas-scrollable{
    width: 100%;
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}

.canvas-scrollable .item-inner{
    height: 300px;
    margin: 10px;
    /*white-space:nowrap;*/
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}

.item-thumb{
  width: 50%;
  height:50%;
  padding: 4px;
  border: 1px solid green;
}

.item-thumb img{
   height: 100%;
   object-fit: cover;
}

图像不适合容器div。高度：100％使图像占据最外层div的整个300px高度。

请在此处修改我的JSFiddle。希望我对我的问题很清楚

Answer 1

看看这里。你想要实现这样的目标吗？

CSS：

ul.horizontal-slide {
    margin: 0;
    padding: 0;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    float: none;
}

ul.horizontal-slide li[class*="span"]:first-child {
    margin-left: 0;
}

查看更新的小提琴

http://jsfiddle.net/2arvozpc/2/