Question

这是我的html和CSS：

我想在1行显示3格：

我将高度设置为div = 300px

在div 2处我设置了height:1500px，但它会自动扩展div而不显示滚动：

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>       
           .mainContent {
                display: table;
                width: 100%; /*Optional*/
                table-layout: fixed; /*Optional*/
                border-spacing: 10px; /*Optional*/              
            }
            .col {
                display: table-cell;
                width: 400px;
                overflow: scroll;
                height: 300px;
                border: 3px solid black;
            }

        </style>
    </head>
    <body>
        <div class="mainContent">
            <div class="col">

                part 1
            </div>

            <div class="col">
                part 2
                <div id="resultTable" style="height:1500px;">


                </div>
            </div>
            <div class="col">
                part 3
            </div>
        </div>
    </body>
    </html>

为什么不能显示div滚动？

Answer 1

我认为问题在于您使用的是表格布局。如果将列div设置为display：block和float：left;那么您就可以向后滚动。

<style>       
       .mainContent {
            display: block;
            width: 100%; /*Optional*/             
        }
        .col {
            display: block;
            float:left;
            width: 400px;
            overflow: scroll;
            height: 300px;
            border: 3px solid black;
        }
    </style>

Answer 2

尝试使用Flex布局。

.mainContent {
  display: flex;
  flex-direction: row;
  border-spacing: 10px; /*Optional*/              
}
.col {
  min-width: 400px;
  overflow: scroll;
  height: 300px;
  border: 3px solid black;
}

<div class="mainContent">
    <div class="col">part 1</div>
    <div class="col">part 2
        <div id="resultTable" style="height:1500px;">
        </div>
    </div>
    <div class="col">
        part 3
    </div>
</div>

为什么无法显示div滚动？

2 个答案: