Question

I want to move the view more button below the place holders

HTML：

<section name="middle" id="middle">

        <p>Upcoming Events</p>

        <div class="grid">
            <img src="http://placehold.it/350x300" alt="" />
            <img src="http://placehold.it/350x300" alt="" />
            <img src="http://placehold.it/350x300" alt="" />
        </div>

        <a href="#">
            <div class="button-2">View More</div>
        </a>
    </section>

的CSS：

.button-2 {
text-align: center;
top: 0;
margin: 0 auto;
width: 200px;
height: 30px;
border-style: solid;
border-width: 2px;
border-color: #1999f9;
color: #1999f9;
padding-top: 10px;
    transition: background-color 0.5s ease;
}


    .grid {
    position: absolute;
    top: 150px;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    /* Align center inline elements */
}

.grid img {
    vertical-align: middle;
    display: inline-block;
    padding-left: 10px;
}

如何将视图更多按钮移动到占位符下方？这也是我的占位符css。有没有办法解决这个问题？

Answer 1

要使用top: 0; left:0，您需要在该CSS类中添加position :absolute。这应该现在可以工作..

其次，button2应该有底：0并且网格应该有顶部：0如果你想让网格出现在按钮上面..

为什么这个按钮div会移动到图像div下方？

1 个答案: