divの右側にある要素を修正するにはどうすればいいですか？

Question

divの右側の位置を固定したいボタンがあります。ボタンは左divの表示を切り替えています。問題が解決したらボタンの位置が失われます。

ここで私はこれまで何をやったか、ここれるExample

され、：

$('.results_toggle').on('click', function() { 
 
    $(this).toggleClass('left_hide'); 
 
    $('.left').toggle(); 
 
    });

.cont { 
 
     width: 100vw; 
 
    } 
 

 
    .left { 
 
     position: relative; 
 
     width: 50vw; 
 
     height: 100vh; 
 
     background-color: grey; 
 
     float: left; 
 
     border-left: 2px solid white; 
 
    } 
 

 
    .right { 
 
     height: 100vh; 
 
     width: 50vw; 
 
     float: left; 
 
    } 
 

 
    .results_toggle:before { 
 
     content: "\f054"; 
 
     font-family: FontAwesome; 
 
     font-style: normal; 
 
     font-weight: normal; 
 
     text-decoration: inherit; 
 
     color: black; 
 
     font-size: 24px; 
 
     padding-right: 0.5em; 
 
     position: absolute; 
 
     top: 14px; 
 
     left: 5px; 
 
    } 
 

 
    .results_toggle { 
 
     background-color: grey; 
 
     height: 60px; 
 
     width: 30px; 
 
     position: absolute; 
 
     z-index: 106; 
 
     top: 45vh; 
 
     right: 223px; 
 
     border-bottom-right-radius: 110px; 
 
     border-top-right-radius: 110px; 
 
     border-bottom: 0; 
 
    } 
 

 
    .left_hide { 
 
     left: 0px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
     <div class="cont"> 
 
     <div class="left"> 
 
     </div> 
 
     <div class="results_toggle"> 
 
     <!-- the button --> 
 
     </div> 
 
     <div class="right"> 
 
     </div> 
 
    </div>

Answer 1

などleft: 0の位置をそれはいつも.left divに隣接しています。

<div class="cont"> 
    <div class="left"></div> 
    <div class="right"> 
    <div class="results_toggle"></div>  
    </div> 
</div> 

.right { 
    position: relative; /* add this */ 
} 

.results_toggle { 
    /* remove 'right' */ 
    left: 0; /* add this */ 
} 

Working example

この方法の利点は、画面解像度の変化によって完全に影響を受けないであろうということです。

Answer 2

わからないことは、あなたが何を意味するかだ場合には、ボタンのleft属性を単に灰色のボックスと同じ50vwに変更しました。 Here's a fiddle

編集： 別のオプション：position: relativeとfloat: leftleftまたはright財産なしでこれに対する最も簡単な解決策は.rightのdiv以内にトグルを置くことであろう updated fiddle

Answer 3

これは、それぞれのプロパティを修正したためです。

absoluteとrelativepositionを使用して、親の右側にある要素を修正できます。子供のwidthを追加します。

例

.parent{ 
 
width:200px; 
 
height:200px; 
 
background-color:#ccc; 
 
position:relative; 
 
} 
 

 
.child{ 
 
position:absolute; 
 
right:0; 
 
top:100px; 
 
transform:translateX(100%) translateY(-50%); 
 
}

<div class="parent"> 
 
<button class="child">btn</button> 
 
</div>

Answer 4

あなたは、ビューポートユニットを使用するので、ビューポートのサイズ（解像度）を変更するときにそれらの値が変化します。

あなたはarrowは（灰色のdivの右側に、そうと）途中で滞在したい場合は、あなたがこのよう

$('.results_toggle').on('click', function() { 
 

 
    $(this).toggleClass('left_hide'); 
 
    $('.left').toggle(); 
 

 
});

.cont { 
 
    width: 100vw; 
 
} 
 

 
.left { 
 
    position: relative; 
 
    width: 50vw; 
 
    height: 100vh; 
 
    background-color: grey; 
 
    float: left; 
 
    border-left:2px solid white; 
 
} 
 

 
.right { 
 
    height: 100vh; 
 
    width: 50vw; 
 
    float: left; 
 
} 
 

 
.results_toggle:before { 
 
     content: "\f054"; 
 
    font-family: FontAwesome; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
    color: black; 
 
    font-size: 24px; 
 
    padding-right: 0.5em; 
 
    position: absolute; 
 
    top: 14px; 
 
    left: 5px; 
 
} 
 

 
.results_toggle { 
 
     background-color: grey; 
 
    height: 60px; 
 
    width: 30px; 
 
    position: absolute; 
 
    z-index: 106; 
 
    top: 50%; 
 
    right:50%; 
 
    transform:translate(100%,-50%); 
 
    border-bottom-right-radius: 110px; 
 
    border-top-right-radius: 110px; 
 
    border-bottom: 0; 
 
} 
 

 
.left_hide{ 
 
    left:0px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cont"> 
 
    <div class="left"> 
 

 
    </div> 
 
    <div class="results_toggle"> 
 

 
    </div> 
 
    <div class="right"> 
 

 
    </div> 
 
</div>

以下

参照スニペットそれを中央にすべきです

Answer 5

私にとって、要素を整列させる最も良い方法は、Flexbox属性を使用することです。これらの属性を使用すると、行、列にボックスとして要素を配置できます。あなたのケースでは、左側と右側にメインボックス.contがあります。メインのdivが赤色の背景で表される

：これはフレキシボックスの配置と結果です。あなたの中には、左のdivがあり、右のボタンに揃えられています。ここで

は、このようにするコードです：

<html> 
<head> 
    <meta charset='utf-8' /> 
    <style type="text/css"> 
    .cont 
    { 
    display: flex; 
    align-items: center; 
    background-color: red; 
    color: white; 
    } 
    .left 
    { 
    background-color: blue; 
    margin: 5px; 
    } 
    button 
    { 
    background-color: green; 
    } 
    </style> 
</head> 
<body> 
    <div class="cont"> 
    <div class="left"> 
    <p>Left div</p> 
    </div> 
    <div class="results_toggle"> 
     <button>Right button</button> 
    </div> 
    <div class="right"></div> 
    </div> 
</body> 
</html>