html - 当你有很多列时如何使用水平滚动

Question

当您有很多列(例如 15 列)时，我会尝试将列正确地放置在适当的位置。

这是我正在做的网页的截图。

可以看出，我正在尝试做 trello( https://trello.com ) 所做的事情。当你有很多列时，你将能够水平滚动。但在这里，不适合页面的其余列会向下显示到页面。

这是 trello 的屏幕截图，我希望它执行的操作

如截图 2 所示，无论您有多少列，它都可以水平滚动。

这是 HTML 代码:

<div id="background">
    <div class="row">
        <div class="col-sm-2">
            <h3>Objectives 1</h3>
            //content of cards here
        </div>

        <div class="col-sm-2">
            <h3>Objectives 2</h3>
            //content of cards here
        </div>

        <div class="col-sm-2">
            <h3>Objectives 3</h3>
            //content of cards here      
        </div>

        <div class="col-sm-2">
            <h3>Objectives 4</h3>
            //content of cards here
        </div>

        <div class="col-sm-2">
            <h3>Objectives 5</h3>
            //content of cards here
        </div>

        <div class="col-sm-2">
            <h3>Objectives 6</h3>
            //content of cards here
        </div>

        <div class="col-sm-2">
            <h3>Objectives 7</h3>
            //content of cards here
        </div>

        <div class="col-sm-2">
            <h3>Objectives 8</h3>
            //content of cards here
        </div>

        <div class="col-sm-2">
            <h3>Objectives 9</h3>
            //content of cards here
        </div>       
    </div>
</div>

这是CSS代码:

#background
{ 
    background-color:#9B59B6;
    margin: -19px 0 0 0; //this is needed to remove the white space on top of the page
    min-height: 100vh; min-width: 100vw;
    overflow:hidden;
}

.col-sm-2 
{ 
    display: inline-block;
}

我在 ASP.net MVC 6 上做这个，它是“cshtml”格式，所以我认为它与 html5 有点不同。(我是新手)

我是网络编程新手，我该怎么做？

请帮忙，谢谢。

Answer 1

表格是使页面水平增长的解决方案之一，因此当您使用 div 时使用这些类来模拟表格行为:

#background
{ 
    background-color:#9B59B6;
    margin: -19px 0 0 0; 
    min-height: 100vh; min-width: 100vw;
    overflow:scroll;
    display:table;
}
.row
{ 
    display: table-row;
}
.col-sm-2 
{ 
    display: table-cell;
    padding:10px;
}

    <div id="background">
        <div class="row">
            <div class="col-sm-2">
                <h3>Objectives 1</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 2</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 3</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 4</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 5</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 6</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 7</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 8</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>

        </div>
    </div>

您还可以查看此链接，它非常有用:

How To Create a Horizontally Scrolling Site