Question

我正在尝试在一个名为drop-section的div中放置一个投票计数器。我已经设法创造了所需的效果，在所有情况下都能很好地工作，除非我将物品放在掉落区域内。当我这样做时，箭头不再对着容器的顶部和底部。如果它们具有绝对定位，我无法弄清楚为什么上下箭头会像那样移动。我已经查看过drop-section css，看不出它为什么会这样做。

这是html：

<html>
    <body>

        <div id="wrapper">
            <div id="drop-section">

                <div id="menu">
                    <a class="item" href="drop_index.php">Dead Drop</a>
                    <a class="item" href="add_topic.php">New Post</a>
                    <a class="item" href="admin/add_cat.php">New Category</a>
                    <div id="userbar">Hello, dude.</div>
                </div> <!--menu-end-->

            <!--vote-box-container up and down elements lose 
            abs position when vote-box-container is 
            inside drop section-->

            </div> <!--drop-section-end-->   

            <!--vote-box-container works perfectly here outside the drop section-->

                <div id="vote-box-container">
                    <div id = "vote-box">
                        <div class="up">
                            <img src="img/up.png">
                        </div>

                        <div class="down">
                            <img src="img/down.png">
                        </div>
                        <div id = "votes">0</div>
                    </div> <!--vote-box-end-->
                </div> <!--vote-box-container-end-->

        </div> <!--wrapper-end-->
    </body>
</html>

这是CSS文件：

#wrapper {
    width: auto;
}

#menu {
    clear: both;                
    width:88%;
    margin: 0 auto;
    height:20px;
    background: none;
    text-align: left;
    font-size: .9em;
    padding-bottom: 2%;
}

#menu a:hover {
    background: #930c0c;
    padding: 7px;
    color: #fff;
}

.item {
    color: #fff;
    background-color: #000;
    font-family: 'Play', sans-serif;
    margin: 7px;
    padding: 7px;
    text-decoration: none;
}

#userbar {
    float: right;
}


#drop-section {
    background-image: url(../img/wrapper-bg.png);
    background-repeat: repeat-x repeat-y;
    border-style: solid;
    border-width: 2px;
    border-color: #222;
    box-shadow: 10px 10px 5px #000;
    width: auto;
    line-height: 40px;
    padding: 10px 25px;
    margin-bottom: 1%;
    font-family: sans-serif;
    overflow: auto;
}

#vote-box-container {
    height: 80px;
    width: 50px;
    float: left;
    background: #000;
    margin-left: 5px;
    position: relative;
}

#vote-box {
    height: 80px;
    width: 30px;
    position: absolute;
    left: 10px;
    display: table;
    padding: 0;
}

#votes {
    color: white;
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
}

.up {
    position: absolute;
    top: 0px;
}

.down {
    position: absolute;
    bottom: 0px; 
}

Answer 1

＃drop-section css中的行高是在箭头图像上方和下方添加空格。尝试将line-height：0添加到＃drop-section

中的图像容器.up和.down

CSS元素在某些div中失去绝对位置

1 个答案: