Question

希望你能提供帮助。我有一个div作为一个按钮。单击时，将在所单击的div上方显示叠加层。此叠加层具有绿色边框和复选标记。现在，当div只有一行高时，标记工作正常。如果文本的长度增加，则叠加div看起来比底部div短。有没有办法可以使动态叠加与底部div的大小相同，即取决于文本的长度？希望这是有道理的。

.text-btn-bg {
    background:#2ecc71;
    height:100%;
    width:100%;
    margin:0 auto;
    padding:0;
}
.text-btn {
    display:flex;
    height:100%;
    color:#fff;
    margin:0;
    padding:0;
    cursor:pointer;
    border:6px solid #3498db;
    -webkit-transition:-webkit-transform .07s ease-out;
    -moz-transition:-moz-transform .07s ease-out;
    -o-transition:-o-transform .07s ease-out;
    transition:transform .07s ease-out;
}
.text-btn.txt-btn1, .text-btn.txt-btn2, .text-btn.txt-btn3, .text-btn.txt-btn4, .text-btn.txt-btn5, .text-btn.txt-btn6 {
    background-color:#fff;
    color:#3498db;
}
h5.h5-text-btn {
    vertical-align:middle;
    display:table-cell;
    padding:10px 30px;
    margin:auto;
    font-weight:600;
}
.text-btn.ico-btn-check-overlay {
    background-color: rgba(255, 255, 255, .8);
    border-color: #1abc9c;
  height:73px;
 margin-top: -50px;
}

<div class="text-btn-bg">
                <div class="text-btn txt-btn1">
                    <h5 class="h5-text-btn">The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger.</h5>
                </div>
               
                <div class="text-btn txt-btn1 ico-btn-check-overlay option-choice-check-overlay" style="display: flex;">
                    <span class="icon-checkmark text-checkmark"></span>
                </div>
            
            </div>

Answer 1

两件事简化并解决了您的问题：框大小和绝对定位。

Fiddle

* {
    box-sizing: border-box; /* include padding and borders in size */
}
.text-btn-bg {
    position: relative; /* needed for child positioning */
    background: #2ecc71;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.text-btn {
    display: flex;
    height: 100%;
    color: #fff;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 6px solid #3498db;
    -webkit-transition: -webkit-transform .07s ease-out;
    -moz-transition: -moz-transform .07s ease-out;
    -o-transition: -o-transform .07s ease-out;
    transition: transform .07s ease-out;
}

.text-btn.txt-btn1,
.text-btn.txt-btn2,
.text-btn.txt-btn3,
.text-btn.txt-btn4,
.text-btn.txt-btn5,
.text-btn.txt-btn6 {
    background-color: #fff;
    color: #3498db;
}

h5.h5-text-btn {
    vertical-align: middle;
    display: table-cell;
    padding: 10px 30px;
    margin: auto;
    font-weight: 600;
}

.text-btn.ico-btn-check-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .8);
    border-color: #1abc9c;
}

<div class="text-btn-bg">
    <div class="text-btn txt-btn1">
        <h5 class="h5-text-btn">The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger. The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger. The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger.</h5>
    </div>

    <div class="text-btn txt-btn1 ico-btn-check-overlay option-choice-check-overlay" style="display: flex;">
        <span class="icon-checkmark text-checkmark"></span>
    </div>
</div>

Div覆盖与div相同的大小

1 个答案: