css - 如何使按钮与边框合并(附图片)

Question

我想做这样的盒子image

具有以下要求:

1. 按钮还在边界线上

2. 高度是固定的，所以所有盒子的高度都是一样的

编辑:我最后尝试的代码

CSS

.catalog {
    border: 2px solid #f0bf3c;
    height: 600px;
    width: 350px;
    margin-bottom: 65px;
    float: left;
    margin-right: 25px;
}
.read-more {
    font-family: trickpony;
    height: 34px;
    padding: 9px 30px;
    background-color: #f0bf3c;
    border-radius: 4px;
    text-decoration: none;
    color: black;
    margin-left: 40px;
    margin-top: 78px;
    position: absolute;
}

HTML

<div class="catalog">
        <img src="http://localhost:999/img/catalog/belajar_adab_toilet.jpg">
        <center><h4>Header Title<br>Header Title</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit condimentum gravida. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed nec diam luctus, fringilla massa quis, pharetra est. Sed semper rhoncus turpis, id ullamcorper est facilisis vel. Mauris bibendum nisi sit amet pellentesque dignissim. Mauris at elit luctus, placerat sem ut, faucibus ante. Curabitur fringilla metus vel lobortis elementum. Nullam id sagittis ligula. Morbi volutpat mauris ut nunc consectetur, in mollis massa feugiat.
<br></p>
        <a href="?page=1" class="read-more">Read More</a>
    </center></div>

非常感谢..

PS:我已经尝试使用 top 和 left 属性，但是当文本与第一个框不同时它只是移动了..

Answer 1

希望这是你想要实现的:

    .catalog {
        border: 2px solid #f0bf3c;
        height: 600px;
        width: 350px;
        margin-bottom: 65px;
        float: left;
        margin-right: 25px;
        position: relative; /* to use position: absolute on .read-more */
    }

    .read-more {
        font-family: trickpony;
        height: 34px;
        line-height: 34px; /* to center text vertically */
        padding: 0 30px; /*remove top/bottom padding to keep the height of 34px */
        background-color: #f0bf3c;
        border-radius: 4px;
        text-decoration: none;
        color: black;
        position: absolute; /* relative to catalog (position: relative) */
        bottom: -17px; /* half height (34px) */
        right: 20px;
    }

<div class="catalog">
        <img src="http://localhost:999/img/catalog/belajar_adab_toilet.jpg">
        <center><h4>Header Title<br>Header Title</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit condimentum gravida. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed nec diam luctus, fringilla massa quis, pharetra est. Sed semper rhoncus turpis, id ullamcorper est facilisis vel. Mauris bibendum nisi sit amet pellentesque dignissim. Mauris at elit luctus, placerat sem ut, faucibus ante. Curabitur fringilla metus vel lobortis elementum. Nullam id sagittis ligula. Morbi volutpat mauris ut nunc consectetur, in mollis massa feugiat.
<br></p>
        <a href="?page=1" class="read-more">Read More</a>
    </center></div>