在x轴上滚动div中的div

Question

我正在努力实现以下图片建议：

正如您所猜测的那样，这是一张Magic：The Gathering卡片列表。我试图按照图示显示它们，但我遇到了很多麻烦。我需要在<div>内使用x轴上的滚动条创建<div>。

以下是我的观点：

<div class="formstyle">
    <div class="inline-block">
        <div class="cardColumn blackBorder">
            <div>
                Type one ability per line:
            </div>
            <div>
                @Html.TextAreaFor(_item => _item.mTextAbilities, new { @id = "cardAbilities" })
            </div>
        </div>
        <div class="wideColumn blackBorder scrollX">
            <div style="width: 20%;">
                <div class="row">
                    <div class="columnText">
                        @Html.CheckBoxFor(_item => _item.mAllCardSets)
                    </div>
                    <div class="columnValue">
                        All
                    </div>    
                </div>
            </div>
            <div class="scrollX">
                <table class="scrollX">
                    @{
                        for (int i = 0; i < Model.mListCardSets.Count; i++)
                        {
                            if (i == 0)
                            {
                                @Html.Raw("<tr>")
                            }
                            else if (i % 6 == 0)
                            {
                                @Html.Raw("</tr><tr>")
                            }
                            else if(i == Model.mListCardSets.Count -1)
                            {
                                @Html.Raw("</tr>")
                            }
                            <td>
                                @Html.HiddenFor(_item => _item.mListCardSets[i].Name)
                                @Html.HiddenFor(_item => _item.mListCardSets[i].Code)
                                @Html.CheckBoxFor(_item => _item.mListCardSets[i].IsChecked, new { @class = "checkGroup4", @id = Model.mListCardSets[i].Name })
                                @Html.DisplayFor(_item => _item.mListCardSets[i].Name) 
                                @Html.Image("~\\Images\\CardSetRarity\\" + Model.mListCardSets[i].Code + "_R.jpeg", Model.mListCardSets[i].Name, new { @title = Model.mListCardSets[i].Name })
                            </td>
                        }
                    }
                </table>
            </div>
        </div>
    </div>
</div>

相关的css类：

.formStyle {
    -ms-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
    background-color: white;
    border: 4px solid darkgrey;
    margin: 5px;
    overflow: hidden;
}

.inline-block {
    max-height: 30%;
    min-height: 30%;
    height: 30%;
    width: 100%;
    display: inline-block;
}

.cardColumn {
    display: table-cell;
    width: 30%;
    padding: 5px;
    position: relative;
}

.wideColumn {
    overflow: auto;
    width: 60%;
    display: table-cell;
}

.blackBorder {
    border: 2px solid black;
}

.scrollX {
    overflow-y: hidden;
    overflow: auto;
}

.row {
    height: 40px;
    line-height: 40px;
}

.columnText {
    max-width: 30%;
    -moz-min-width: 30%;
    -ms-min-width: 30%;
    -o-min-width: 30%;
    -webkit-min-width: 30%;
    min-width: 30%;
}

.columnValue {
    width: 70%;
}

到目前为止，我还没有成功，任何帮助都会受到赞赏。

以下是它的演示方式：

Answer 1

在你希望其中的元素滚动的div上尝试overflow-x: scroll;。

Answer 2

.scrollX { height:200px; width:200px; overflow-y:hidden; overflow-x:scroll; }

将高度和宽度设置为您的规格，我只选择随机的。

Answer 3

您的CSS应如下所示：

#outer
{
    height:100px;
    width:200px;
    overflow-y:scroll;
}

#inner
{
    width:300px; //Just as an example, to make the inner div wider than its parent.
    height: 100%;
}

Fiddle