HTML と CSS の学習を始めたばかりで、単純な静的 Web サイトを作成しようとしています。私の問題は、 div container( option2) を css でスクロールさせようとしていることですoverflow:auto。
問題は、が有効になっているときに、間違った場所に配置されたり、重複したりする内部 div があることoverflow:autoです。#box2の内部 div です#option2。#box2textdivの内部divです#box2。
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;
}