Question

我想制作像image

这样的方框

具有以下要求：

按钮仍在边框线
高度是固定的，所以所有方框高度都是相同的

编辑：我最后的尝试代码

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

希望这是你想要实现的目标：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，您需要将.catalog设置为absolute .catalog按钮不会离开bottom
为right

.read-more

css

您可以删除不需要的.read-more .catalog { border: 2px solid #f0bf3c; height: 600px; width: 350px; margin-bottom: 65px; float: left; margin-right: 25px; position: relative; } .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; bottom: -17px; right: 10px; }，我已评论过不需要的代码

＆＃13;

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

＆＃13;

auth.verifyToken

＆＃13;

如何使用边框进行按钮合并（附图像）

2 个答案: