1. ホーム
  2. 質問と答え
  3. 絶対位置指定のフレックスがサファリで機能しない

絶対位置指定のフレックスがサファリで機能しない

2016-12-30 23 views
1

フレックスボックスでテキストスライダを作成しようとしています。絶対位置指定のフレックスがサファリで機能しない

質問の下にあるすべての子要素を、クロムに表示されているように折りたたんでください。

実際のコードでは、非アクティブな要素はtranslateX（100％）に設定され、アクティブなインデックス要素は0％に設定されます。

私はフレキシボックスを使用したい理由はQUES *ということです：は、質問テキストとテキストコンテナのdivの最初の行と一致する必要がありますが、何の問題が何であるかを長質問のdivの中心にあってはなりませんq-text div。サンプルコードのよう

を は（フレックスなしで試みたが、私はテキストのクエスト*と最初の行を整列させることができなかった）、それにより、テキストの長さの差に異なる中心位置を有しています。

Chromeではうまく動作します。 ただし、Safari（Safariの最新バージョンを使用）には中心がありません。

これを達成するより良い方法があれば、私は見て満足しています！

#container { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: black; 
 
} 
 

 
.question { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    justify-content: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    -webkit-align-items: center; 
 
} 
 

 
.text-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 100%; 
 
    position: absolute; 
 
    color: white 
 
} 
 

 
.q { 
 
    width: 25%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    -webkit-align-items: center; 
 
    align-self: baseline; 
 
} 
 
.q-text { 
 
    width: 75%; 
 
    padding-right: 12%; 
 
}
<html> 
 

 
    <body> 
 

 
    <div id="container"> 
 
     <div class="question"> 
 
     
 
     <div class="text-container"> 
 
      <div class="q"> 
 
      Qest1: 
 
      </div> 
 
      <div class="q-text"> 
 
      1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an 
 
      </div> 
 

 
     </div> 
 
     <div class="text-container"> 
 
      <div class="q"> 
 
      Qest2: 
 
      </div> 
 
      <div class="q-text"> 
 
      2Lorem Ipsum is simply dummy text of the printing and ty 
 
      </div> 
 

 
     </div> 
 
     <div class="text-container"> 
 
      <div class="q"> 
 
      Qest3: 
 
      </div> 
 
      <div class="q-text"> 
 
      3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
 
      </div> 
 

 
     </div> 
 
     
 
     </div> 
 

 
    </div> 
 
    </body> 
 

 
</html>

text 1

text 2

出典

2016-12-30 user3882878

+0

テキストもChromeで、重なっているので、あなたが希望の結果を示す写真を投稿できますか？ – LGSon

+0

私はすべてのものが重なり合うようにしたい。そのため、すべての非アクティブなものを読み込み時にtranslateX（100％）に設定してから、jsを使って1つずつスライドさせます。しかし、サファリのフレックスセンターでは動作しません。 – user3882878

答えて

2

をホープ代わりflexbox、およびtransform: translateのdisplay: inline-blockを使用して、一つの選択肢です。

window.addEventListener('load', function() { 
 
    document.querySelector('button').addEventListener('click', function() { 
 
    var ques = document.querySelector('.text-container:not(.hidden)'); 
 
    ques.classList.toggle('hidden');  
 
    var next = ques.nextElementSibling; 
 
    if (next) { 
 
     next.classList.toggle('hidden'); 
 
     return; 
 
    } 
 
    document.querySelector('.text-container').classList.toggle('hidden'); 
 
    }) 
 
})
.container { 
 
    height: 160px; 
 
    background: black; 
 
} 
 
.question { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.text-container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    transform: translate(-50%,-50%); 
 
    color: white; 
 
    transition: left 0.5s; 
 
} 
 
.text-container.hidden { 
 
    left: -50%; 
 
} 
 
.q { 
 
    display: inline-block; 
 
    width: 20%; 
 
    vertical-align: top; 
 
} 
 
.q-text { 
 
    display: inline-block; 
 
    width: 80%; 
 
    vertical-align: top; 
 
    padding-right: 12%; 
 
    box-sizing: border-box; 
 
} 
 
button { 
 
    margin: 15px 0; 
 
    padding: 10px; 
 
}
<div class="container"> 
 
    <div class="question"> 
 

 
    <div class="text-container"> 
 
     <div class="q"> 
 
     Qest1: 
 
     </div><div class="q-text"> 
 
     1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an 
 
     </div> 
 
    </div> 
 

 
    <div class="text-container hidden"> 
 
     <div class="q"> 
 
     Qest2: 
 
     </div><div class="q-text"> 
 
     2Lorem Ipsum is simply dummy text of the printing and ty 
 
     </div> 
 
    </div> 
 

 
    <div class="text-container hidden"> 
 
     <div class="q"> 
 
     Qest3: 
 
     </div><div class="q-text"> 
 
     3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 
<button>Next question</button>

出典

2016-12-31 10:15:00 LGSon

1

私はあなたがすべての質問を中心にしたいと、彼らはここで他の

いくつかの後に1、フレキシボックスに表示される必要がありますね位置合わせがうまく機能しない

チェック参照flex and absolute positioning

ため、このリンクは、すべてのdivは絶対にラップにdiv要素を持つ各テキストコンテナのdivを配置し、それが絶対的に配置させることにしたい場合。

次のスニペット

#container { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: black; 
 
} 
 

 
.question { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    -webkit-align-items: center; 
 
} 
 
.abs{ 
 
    position:absolute; 
 
    
 
    color:red; 
 
} 
 

 
.text-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 100%; 
 
    color: white 
 
} 
 
.q { 
 
    width: 25%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    -webkit-align-items: center; 
 
    align-self: baseline; 
 
} 
 
.q-text { 
 
    width: 75%; 
 
    padding-right: 12%; 
 
}
<html> 
 

 
<body> 
 

 
    <div id="container"> 
 
    <div class="question"> 
 
     <div class="abs"> 
 
     <div class="text-container"> 
 
     <div class="q"> 
 
      Qest1: 
 
     </div> 
 
     <div class="q-text"> 
 
      1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an 
 
     </div> 
 

 
     </div> 
 
     </div> 
 
    
 
     
 
     <div class="abs"> 
 
     <div class="text-container"> 
 
     <div class="q"> 
 
      Qest2: 
 
     </div> 
 
     <div class="q-text"> 
 
      2Lorem Ipsum is simply dummy text of the printing and ty 
 
     </div> 
 

 
     </div> 
 
     </div> 
 
     
 
     <div class="abs"> 
 
     <div class="text-container"> 
 
     <div class="q"> 
 
      Qest3: 
 
     </div> 
 
     <div class="q-text"> 
 
      3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
 
     </div> 
 

 
     </div> 
 
     </div> 
 
     
 

 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

をチェックするには、それはここで

出典

2016-12-31 00:07:33 Geeky

+0

答えをありがとうが、私はすべてのものが私のサンプルスニペットのように中央に置かれ、重なり合って欲しい。 divは重複して積み重ねられません。私はスライダーを作っている。実際のコードでは、次または前に移動できるようにボタンがあります。 – user3882878

+0

ディスプレイをどのくらい正確に表示するかのスナップショットを追加できますか – Geeky

+0

私のコードスニペットの結果はまさに私が望むものです。テキストコンテナは、ブラックボックスの中央に配置された異なる位置にあります。テキストコンテナの高さが異なるためです。 – user3882878

関連する問題

 関連する問題