ダイナミックコンテンツがその下に表示されたときに、垂直方向に中央に位置するDIVを移動させないようにします。

以下は、非常に単純なWebページの例です。これはポートフォリオサイトです。名前で、物事にリンクします。リンク上にマウスカーソルを移動すると、以下のように1行の説明が表示されます。問題は、コンテナが垂直にセンタリングされているため、動的コンテンツがすべてを再センタリングすることです。どうすれば停止できますか？ダイナミックコンテンツがその下に表示されたときに、垂直方向に中央に位置するDIVを移動させないようにします。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
     html, body { 
      height: 100%; 
     } 

     .container-middle { 
      height: 100%; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
     } 

     #main-div { 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <div class="container-middle"> 
     <div id="main-div"> 
      <h1>CLIENT NAME</h1>  
      <p> 
       <a class="toggle-hover" data-id="proj1" href="http://google.com">Project 1</a> | 
       <a class="toggle-hover" data-id="proj2" href="http://google.com">Something else</a> | 
       <a class="toggle-hover" data-id="proj3" href="http://google.com">Project 3</a> | 
       <a class="toggle-hover" data-id="proj4" href="http://google.com">LinkedIn</a> 
      </p> 
      <div id="proj1" style="display: none;"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis pretium ligula, quis eleifend odio pulvinar a.</p> 
      </div> 
      <div id="proj2" style="display: none;"> 
       <p>Cras orci nulla, ultrices eu magna et, suscipit vulputate diam.</p> 
      </div> 
      <div id="proj3" style="display: none;"> 
       <p>Curabitur aliquam ante et metus consectetur, nec interdum mi imperdiet. Donec auctor eros felis, et posuere est dictum in.</p> 
      </div> 
      <div id="proj4" style="display: none;"> 
       <p>Sed sed porta enim, ac consectetur dui. </p> 
      </div> 

     </div> 
    </div> 
</body> 

<script> 
    $(".toggle-hover").hover(function(){ 
     var divid = $(this).attr('data-id'); 
     $("#" + divid).slideToggle(); 
    }); 
</script> 
</html>

出典

2017-09-27 Warren

問題は、コンテナが垂直方向に中央揃えされているため、動的なコンテンツの再センターのすべて - 私はこれをどのように停止することができますか？

私はそれ以下のソリューションがあなたのキャプションを標的とするために、あなたのjQueryのロジックを保持し実装しましたが、その代わりにslideToggle（jQueryのアニメーション）を使用しての、私たちは移行できるCSSクラスをトグルするように設定しました。

は、その後、私はあなたのキャプションを保持するために.descriptionsと呼ばれるコンテナを作成したので、我々はposition: absoluteでそれらのスタイルを設定することができます - 2つの利点を持っている：それはそれらがすべて同じ空間に存在し、それがのレイアウトと配置に影響を与えることからそれらを防ぐことができます他の要素。

$(".toggle-hover").hover(function() { 
 
    var divid = $(this).attr('data-id'); 
 
    $("#" + divid).toggleClass('show'); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.container-middle { 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#main-div { 
 
    text-align: center; 
 
} 
 

 
.descriptions { 
 
    position: relative; 
 
} 
 

 
.descriptions div { 
 
    opacity: 0; 
 
    position: absolute; 
 
    transition: 1s opacity, 1s transform; 
 
    transform: translateY(-10px); 
 
    width: 100%; 
 
} 
 

 
.descriptions div.show { 
 
    opacity: 1; 
 
    transform: none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container-middle"> 
 
    <div id="main-div"> 
 
    <h1>CLIENT NAME</h1> 
 
    <p> 
 
     <a class="toggle-hover" data-id="proj1" href="http://google.com">Project 1</a> | 
 
     <a class="toggle-hover" data-id="proj2" href="http://google.com">Something else</a> | 
 
     <a class="toggle-hover" data-id="proj3" href="http://google.com">Project 3</a> | 
 
     <a class="toggle-hover" data-id="proj4" href="http://google.com">LinkedIn</a> 
 
    </p> 
 
    <div class="descriptions"> 
 
     <div id="proj1"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis pretium ligula, quis eleifend odio pulvinar a.</p> 
 
     </div> 
 
     <div id="proj2"> 
 
     <p>Cras orci nulla, ultrices eu magna et, suscipit vulputate diam.</p> 
 
     </div> 
 
     <div id="proj3"> 
 
     <p>Curabitur aliquam ante et metus consectetur, nec interdum mi imperdiet. Donec auctor eros felis, et posuere est dictum in.</p> 
 
     </div> 
 
     <div id="proj4"> 
 
     <p>Sed sed porta enim, ac consectetur dui. </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-09-27 02:23:29

美しい解決策：以下のデモ作業

！ – Warren

ダイナミックコンテンツがその下に表示されたときに、垂直方向に中央に位置するDIVを移動させないようにします。

答えて

関連する問題