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