Question

我对我得到的布局很困惑。如何对齐文本底部的边框。下面是布局图片和我的HTML ..

HTML

<div class="submission-box-wrapper">
    <div class="submission-box-inner">
        <h5>ON-CAMERA, AGES 3 &amp; UP:</h5>

        <h6>For Submissions to the Atlanta Office:</h6>
        <p>J Pervis Talent Agency
        949 Image Avenue, Suite C
        Atlanta, GA 30318</p>

        <h6>For Submission to the Louisiana Office:</h6>
        <p>J Pervis Talent Agency
        PO Box 3215
        Baton Rouge, LA 70821</p>

    </div>
</div>

待定CSS

.submission-box-wrapper {
    position: relative;
}

.submission-box-inner {
    position: absolute;
    padding: 20px;
    border: 1px solid rgb(226, 226, 226);
    width: 100%;
}

.submission-box-inner h5 {
    font-family: "Open Sans";
    color:  #dcab06;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
}

.submission-box-inner h6 {
    font-family: "Open Sans";
    font-weight: 800;
    line-height: 30px;
    text-align: left;
 }

.submission-box-inner p {
    font-family: "Open Sans";
    color:  #000000;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
 }

有人可以帮我一点......

谢谢..

Answer 1

我认为我的方式不是最好的，但仍然做你想要的，所以为什么你不给它机会 DEMO

新CSS

.submission-box-inner {
    position: relative;
    padding: 20px;
    border: 1px solid rgb(226, 226, 226);
    width: 100%;
    top:10px;
}
.submission-box-inner h5 {
    font-family: "Open Sans";
    color: #DCAB06;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    position: absolute;
    top: -40px;
    background-color: white;
    padding: 0 5px;
}

对齐边框CSS

1 个答案: