Question

我刚开始学习html和css，我正在尝试创建一个简单的静态网站。我的问题是我正在尝试使用css option2创建一个div容器（overflow:auto）。

当overflow:auto生效时，存在错位，重叠等内部div。 #box2是#option2的内部div。 #box2text是#box2 div的内部div。

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;
}

Answer 1

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

margin-left: auto; 
margin-right: auto

此外，id应该只使用一次。虽然它通常不会影响浏览器呈现HTML的方式，但根据HTML标准，它是不正确的。拥有相同id的多个元素可能会导致浏览器混淆，特别是如果您想使用JavaScript来操作这些元素。

通过absolute更正：http://jsfiddle.net/qpkJV/1/

查看此jsfiddle

用css溢出滚动div内容

HTML

CSS

1 个答案: