我有一个按钮,我想把它的位置固定在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>
答案 0 :(得分:3)
最简单的解决方案是将切换放在 - (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item {
NSUInteger index = [[theTabBar items] indexOfObject:item];
NSLog(@"Tab index = %u", (int)indexO);
[self.navigationController.tabBarController setSelectedIndex:index];
}
div中,并将其放在.right
处,使其始终与{{1}相邻div,像这样:
left: 0
.left
这种方法的优点是它完全不受屏幕分辨率变化的影响。
答案 1 :(得分:1)
不确定这是不是您的意思,但我只是将按钮的left
属性更改为50vw
,与灰色框相同。
Here's a fiddle
编辑:
另一个选项:position: relative
和float: left
没有left
或right
属性
updated fiddle
答案 2 :(得分:1)
您使用视口单位,因此在更改视口大小(分辨率)时,它们的值会发生变化。
如果你希望arrow
保持在中间(以及灰色div的右侧),你应该以这种方式居中
请参阅下面的代码段
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
&#13;
.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;
}
&#13;
<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>
&#13;
答案 3 :(得分:1)
对我来说,对齐元素的最佳方法是使用Flexbox属性。使用这些属性,您可以将元素作为框放在一行,一列......在您的情况下,您有一个主框.cont,左侧和右侧。这是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>
答案 4 :(得分:0)
这是因为你修复了每个属性。
您可以使用absolute
和relative
position
修复其父级右侧的元素。并添加您孩子的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>