如何修复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

这个最简单的解决办法是将拨动内的.right格，并在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: left无left或right财产 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属性。使用这些属性，您可以将元素作为方框放置在一行，一列...在您的情况下，您有一个主框，包含左侧和右侧。这是与实现Flexbox放置结果：

主要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>