2017-12-29 41 views
0


私は、ここに見ることができるこの両面CSSスライドショーで少し悪夢を抱いています:https://codepen.io/byte37/pen/GymRjb
PC /ランドスケープモードでは正常に動作しますが、応答性では動作しません。ボタンとテキストを同じ位置に置くようにしようとしています。他のスライドショーから左右に10%、その中央にあります。画面のサイズが変更されると、コンテナ(スライドショー)の高さが変わります。 @media max-width cssを試しましたが、うまく機能しませんでした。
私は非常に単純なことに固執しています。私はその件についてもっとよく知っている人から助けを受けてうれしいです。

コード:(容器の高さの変化を伴う)容器に要素を貼り付けるレスポンシブなCSS

<div class="main-slider"> 
     <div class="row"> 
     <a href="/it/xxx"> 
      <div class="fade-art"> 
       <img src="https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg"> 
       <img src="http://www.bigfoto.com/stones-background.jpg"> 
       <img src="http://sites.psu.edu/mab6390mis387/wp-content/uploads/sites/39460/2016/02/mountain.jpg"> 
       <div class="titolo-art"> 
        <div><span class="font-w-100 white-text btn-cbi-soft-blu btn btn-md">Left</span></div> 
        <br> 
        <p class="font-w-100 white-text p-slider-rx">Bla bla bla bla bla</p> 
       </div> 
      </div> 
     </a> 
     <a href="/it/yyy"> 
      <div class="fade-outlet"> 
       <img src="http://www.freedigitalphotos.net/images/img/homepage/golf-1-top-82328.jpg"> 
       <img src="http://globalmedicalco.com/photos/globalmedicalco/9/42934.jpg"> 
       <img src="https://static.pexels.com/photos/88212/pexels-photo-88212.jpeg"> 
       <div class="titolo-outlet"> 
        <span class="font-w-100 white-text btn-cbi-soft-blu btn btn-md">Right</span> 
        <br> 
        <p class="font-w-100 white-text">Bla bla bla bla bla</p> 
       </div> 
      </div> 
     </a> 
     </div> 
</div> 

のCss:

.main-slider { 
    width: 100%; 
    overflow: hidden; 
    margin-top: -30px; 
} 
.titolo-art { 
    position: absolute; 
    top: 50%; 
    left: 80%; 
} 
.titolo-outlet { 
    position: absolute; 
    top: 50%; 
    right: 80%; 
} 
.p-slider-rx { 
    left: -107%; 
    position: absolute; 
} 

@keyframes fade { 
    0% { opacity: 0; } 
    11.11% { opacity: 1; } 
    33.33% { opacity: 1; } 
    44.44% { opacity: 0; } 
    100% { opacity: 0; } 
} 
/* ** */ 
.fade-outlet { position:relative; float:right; height:400px; width:50%; background-color: #009de3; overflow: hidden;} 
.fade-outlet img { position:absolute; left:0; right:0; opacity:0; /*width:100%;*/ animation-name: fade; animation-duration: 18s; animation-iteration-count: infinite;} 
/* ** */ 
.fade-art img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 12s; animation-iteration-count: infinite; /*width:100%;*/ /*margin-top: -15%;*/} 
.fade-art { position:relative; float:left; height:400px; width:50%; background-color:#c3b091; overflow: hidden;} 
/* ** */ 
.fade-art img:nth-child(1) {animation-delay: 2s;} 
.fade-art img:nth-child(2) {animation-delay: 12s;} 
.fade-art img:nth-child(3) {animation-delay: 24s;} 
/* ** */ 
.fade-outlet img:nth-child(1) {animation-delay: 6s;} 
.fade-outlet img:nth-child(2) {animation-delay: 18s;} 
.fade-outlet img:nth-child(3) {animation-delay: 30s;} 

.btn-cbi-soft-blu { 
    background-color: transparent; 
    border: 1px solid #fff; 
    padding:15px; 
    color: #fff; 
} 

ありがとう! :)

答えて

0

私があなたの質問を正しく理解していれば、ボタンを中心から一定の距離にしたいだけです。これを変更してみてください。

.titolo-art { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 50px; 
 
} 
 

 
.titolo-outlet { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50px; 
 
}

+0

もぉ、感謝の男!だから私は正しい場合、ピクセルで距離を与える必要がありましたか? :) – Pietro

+0

はい、それはセンターから特定の距離にdivを作るでしょう。 –

関連する問題