1
我想要一个带有2个元素的按钮来滑动背景。Bootstrap儿童元素高度100%
但是我希望这两个元素都能垂直居中,即使其他元素较大时也能获得100%的高度。
下面是HTML
<button class="btn-cstm-slide">
<div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
<div class="btn-cstm-slide-text">
<span>Just a Testtest</span>
<br/>
<span>Let's see</span>
</div>
</button>
而且这里的CSS
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
height:100%;
min-height:100%;
margin: 0;
padding: 10px;
position: relative;
text-decoration: none;
background: #474f54;
color: #fff;
}
.btn-cstm-slide-text {
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text * {
position:relative;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
演示
你能帮助我吗? :(
不,我不需要固定的宽度 有没有选项是动态的:??/ – CutmastaD
@CutmastaD灿你设置了一个固定的高度为按钮?https://jsfiddle.net/bnb0Lswu/ – JBartus
不,不幸的是,我工作了一些东西,但较小的div的高度并没有得到父母身高的100%:https: //jsfiddle.net/e07uc4kj/12/ – CutmastaD