divを右からdivにスライドするときにdivを中央に配置する方法

Question

イメージを表示するページがあります（現在は緑のdivプレースホルダのみです）。私はコメントボックスになり、残りのスペースの中心に画像を保持する右からdivをスライドさせたい。画像がこの残りのスペースには大きすぎる場合は、ユーザーが画像を水平にスクロールできるようにしたいと考えています。

私はこれ持っている：あなたは、コメントボックスが飛び出すが、それは代わりに、それが左に移動することの画像ホルダーのdivと重なって見ることができるようにhttps://jsfiddle.net/fwwfe2q6/

：

var showingComments = false; 
 

 
$("#clickme").click(function() { 
 
    if (showingComments == false) { 
 
    showingComments = true; 
 
    $(this).parent().animate({ 
 
     right: '0px' 
 
    }, { 
 
     queue: false, 
 
     duration: 500 
 
    }); 
 
    } else { 
 
    showingComments = false; 
 
    $(this).parent().animate({ 
 
     right: '-150px' 
 
    }, { 
 
     queue: false, 
 
     duration: 500 
 
    }); 
 
    } 
 
});

#Picture_container { 
 
    width: auto; 
 
    background-color: yellow; 
 
    overflow-x: auto; 
 
} 
 

 
#thePicture { 
 
    height: 300px; 
 
    width: 400px; 
 
    /* this will change when the page loads */ 
 
    background-color: green; 
 
    left: 0px; 
 
    right: 0px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#commentsBox { 
 
    background: #00FFFF; 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 400px; 
 
    right: -150px; 
 
    top: 10px; 
 
} 
 

 
#clickme { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 20px; 
 
    width: 400px; 
 
    background: #5F9EA0; 
 
    text-align: center; 
 
    transform: rotate(90deg); 
 
    transform-origin: left top 0; 
 
} 
 

 
#comments { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='Picture_container'> 
 
    picture container 
 
    <div id='thePicture'> 
 
    the picture goes here 
 
    </div> 
 
</div> 
 

 
<div id="commentsBox"> 
 
    <div id="comments"> 
 
    I am a sticky-out comments box 
 
    </div> 
 
    <div id="clickme"> 
 
    click me! 
 
    </div> 
 
</div>

例。コメントボックスの拡大と折りたたみ状態の両方に緑のdiv（画像を表す）を中央に配置し、拡大されたコメントボックスとともにウィンドウを収めるには大きすぎる場合、緑のdivを水平にスクロール可能にする方法を提案できますか？

Answer 1

あなたはフレックスを使用して構造を再考する：

body {margin:0;} 
 
#Picture_container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 100vh; 
 
    max-width: 700px; 
 
    transition: 0.5s; 
 
    margin: auto; 
 
    background: yellow; 
 
    text-align: center; 
 
} 
 

 
#thePicture { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex: 1; 
 
    overflow: auto; 
 
} 
 

 
#thePicture img { 
 
    flex-shrink: 0; 
 
    margin: auto; 
 
    max-height: 75vh; 
 
} 
 

 
p, [for="mw100"] { 
 
    width: 100%; 
 
    } 
 
    p { 
 
    background: turquoise; 
 
    padding: 1em; 
 
    margin: 0; 
 
} 
 

 
#commentsBox { 
 
    display: flex; 
 
    background: tomato; 
 
    overflow: hidden; 
 
} 
 

 
#test, 
 
#full, 
 
#mw100 { 
 
    position: absolute; 
 
    right: 100%; 
 
} 
 

 
#commentsBox label { 
 
    display: block; 
 
    background: tomato; 
 
    width: 2em; 
 
    margin: 1em 0 0 0em; 
 
    white-space: nowrap; 
 
    transform: rotate(90deg); 
 
    cursor: pointer; 
 
} 
 

 
#commentsBox label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 2em; 
 
    height: 100vh; 
 
    display: block; 
 
} 
 

 
#clickme { 
 
    background: purple; 
 
    width: 200px; 
 
    margin-right: -200px; 
 
    transition: 0.1s; 
 
} 
 

 
label { 
 
    font-size: 1.2em; 
 
    font-weight: bold; 
 
    color: white; 
 
    text-shadow: 0 0 2px black; 
 
} 
 

 
#test:checked~#clickme { 
 
    margin-right: 0; 
 
} 
 

 
#full:checked~#Picture_container { 
 
    max-width: 100%; 
 
} 
 

 
#mw100:checked~img { 
 
    max-width: 95%; 
 
}

<input type="checkbox" id="full" /> 
 
<div id='Picture_container'> 
 
    <p>picture container <label for="full">Toggle me full or 700px width</label></p> 
 
    <div id='thePicture'> 
 
    <input id="mw100" type="checkbox" /><label for="mw100">toggle image overflow</label> 
 
    <img src="http://dummyimage.com/1800x1000/00ff00&text=the picture goes here" /> 
 
    </div> 
 

 
    <div id="commentsBox"> 
 
    <input type="checkbox" id="test" /> 
 
    <div id="comments"> 
 
     <label for="test">To show comments- click me!</label> 
 
    </div> 
 

 
    <div id="clickme"> 
 
     Shown comments here. 
 
    </div> 
 
    </div>

スニペット期待される結果に応じて、いくつかのオプションを提案しています。

• 全幅またはコンテナ

ラベルのみデモのimputs最大幅と

容器保持イメージ溢れや画像の最大幅、使用sliddingボックスのJS 。

私が便利見つけフレックスについてのチュートリアル/リマインダー：https://css-tricks.com/snippets/css/a-guide-to-flexbox/