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

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

尝试将overflow: hidden 更改为overflow: auto，如果宽度大于屏幕，则应使其水平滚动，如果高度大于则垂直滚动。 如果您希望它只能水平滚动，请使用overflow-x: auto

Answer 2

制作overflow-x:auto 或scroll，你可以通过使用overflow-y:hidden 来限制垂直滚动到主容器。请记住，您不应为此使用引导程序预定义的类。你也可以使用 flexbox，虽然这很容易实现。

Answer 3

表格是使页面水平增长的解决方案之一，因此当您使用 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

Answer 4

您可以使用 css 属性 flex 轻松实现。

.container{
  background:#587498;
  position:absolute;
}

.row {
  display:flex;
  display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;     
  display: -webkit-flex;   
  flex-flow:row; 
  width:100%;  
}
.col {
  flex:1;
  -webkit-flex:1;
  margin:10px;
  padding:10px;
  background:#E86850;
  color:white;
  border:1px solid #FFD800;
}

Working example here