时间戳

首页 > 解决方案 > 如何使按钮与边框合并（附图）

css - 如何使按钮与边框合并（附图）

问题描述

我想做这样的盒子

具有以下要求：

  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：我已经尝试过使用顶部和左侧属性，但是当文本与第一个框不同时它只是移动了..

标签： css

解决方案

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

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

推荐阅读