Question

创建一个示例应用程序。当子div较多时，我需要有一个滚动条。水平滚动条没有出现，而是子div向下而不是一条水平线。谁能在不使用jquery的情况下使用css为此提供任何解决方案。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<style>
.main-div
{
border:2px solid black;
height:300px;
width:300px;
overflow-x: scroll;
overflow-y: scroll;
}

.child-div
{
  width:90px;
  border:1px solid black;
  float:left;
}

</style>
</head>
<body style="height:1000px;">

<div class="main-div" >

<div class="child-div" >Header1</div>
<div class="child-div" >Header2</div>
<div class="child-div" >Header3</div>
<div class="child-div" >Header4</div>

 </div>

</body>
</html>

Answer 1

这是用于垂直滚动

将其放在您的身体标签下

 <div class="container">
    <div class="main-div" >

    <div class="child-div" >Header1</div>
    <div class="child-div" >Header2</div>
    <div class="child-div" >Header3</div>
    <div class="child-div" >Header4</div>

   </div>
 </div>

这在样式标签下

main-div
{
  max-height:200px;
  width:100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.child-div
{
  width:100%;
  border:1px solid black;
  height:70px;
  position: relative;
}

工作小提琴

https://jsfiddle.net/nm7s4ahw/3/

CSS可在容器内滚动

1 个答案: