absoluteしているclassのbottom要素にpxで幅を指定しないと0になって文字が縦1列になります。
なぜでしょうか?
HTML
1<common-channel-info riot-style="transform: translate3d({ transX }, { transY }, 0);z-index: { z }"> 2 <a href="{ link }" class="wrapper" ref="wrapper" onmouseenter="{ wrapperEnter }" onmouseleave="{ wrapperLeave }"> 3 <div class="bg-wrap"> 4 <img class="background" ref="background" src="{ info.bg }"> 5 </div> 6 <div class="bottom"> 7 <!-- テスト --> 8 <div class="info-title">{ info.title }</div> 9 </div> 10 </a> 11 <style> 12 common-channel-info { 13 width: 100vw; 14 height: calc(100vw / 2 / 16 * 9); 15 } 16 17 .wrapper { 18 position: relative; 19 width: 100vw; 20 height: calc(100vw / 2 / 16 * 9); 21 overflow: hidden; 22 } 23 24 .bg-wrap { 25 width: 100vw; 26 height: calc(100vw / 2 / 16 * 9); 27 -webkit-perspective: 50; 28 /*-ms-perspective: 100px; 29 -o-perspective: 100px; 30 -moz-perspective: 100px;*/ 31 perspective: 50; 32 text-align: center; 33 overflow: hidden; 34 } 35 36 .background { 37 transform: rotateX(5deg); 38 transform-origin: 0% 100%; 39 width: 100%; 40 height: calc(100vw / 2 / 16 * 9); 41 vertical-align: bottom; 42 opacity: 0.5; 43 } 44 45 .bottom { 46 position: absolute; 47 /*width: 100%;*/ 48 left: 0; 49 bottom: 5%; 50 } 51 52 .info-title { 53 margin-bottom: 10px; 54 /*width: 100px;*/ 55 color: #fff; 56 font-size: 16px; 57 font-weight: bold; 58 line-height: 1; 59 } 60 61 62 63 </style> 64</common-channel-info>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。