我刚刚开始学习 html 和 css，我正在尝试创建一个简单的静态网站。我的问题是我正在尝试option2使用 css 使 div container() 滚动overflow:auto。
overflow:auto问题是当生效时，内部 div 会错位、重叠等。#box2是 的内部 div #option2。#box2text是 div 的内部#box2div。
HTML
<div id="option2">
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
</div>
CSS
#option2 {
height:90%;
width:35%;
margin-left:0;
margin-right:5%;
margin-top:2%;
min-height:90%;
position:apsolute;
float:left;
text-align:center;
overflow:auto;
display:block;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
#box2 {
height:25%;
width:90%;
float:center;
text-align:center;
margin:0 auto;
margin-top:15px;
margin-bottom:5px;
bottom:0px;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
img.pic1 {
float:left;
height:80px;
width: 80px;
margin-left:20px;
margin-top:20px;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
#box2text {
float:right;
height:80%;
width:65%;
margin-right:1%;
margin-top:20px;
background-color:grey;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}