0

我刚刚开始学习 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;
}
4

1 回答 1

0

我能看到的唯一问题是在#option2 的css 中，您absolute拼写错误并且您尝试使用浮点值center。要水平居中元素，请使用

margin-left: auto; 
margin-right: auto

此外，一个 id 只能使用一次。虽然它通常不会影响浏览器呈现 HTML 的方式，但根据 HTML 标准它是不正确的。拥有多个具有相同 id 的元素会在浏览器中引起混乱，尤其是当您想使用 JavaScript 来操作这些元素时。

请参阅此 jsfiddle 并absolute更正：http: //jsfiddle.net/qpkJV/1/

于 2013-03-10T12:21:17.647 回答