如何修复div右侧的元素?

时间:2017-07-26 08:23:28

标签: javascript jquery html css

我有一个按钮,我想把它的位置固定在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>

5 个答案:

答案 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

Working example

这种方法的优点是它完全不受屏幕分辨率变化的影响。

答案 1 :(得分:1)

不确定这是不是您的意思,但我只是将按钮的left属性更改为50vw,与灰色框相同。 Here's a fiddle

编辑: 另一个选项:position: relativefloat: left没有leftright属性 updated fiddle

答案 2 :(得分:1)

您使用视口单位,因此在更改视口大小(分辨率)时,它们的值会发生变化。

如果你希望arrow保持在中间(以及灰色div的右侧),你应该以这种方式居中

请参阅下面的代码段

&#13;
&#13;
$('.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;
&#13;
&#13;

答案 3 :(得分:1)

对我来说,对齐元素的最佳方法是使用Flexbox属性。使用这些属性,您可以将元素作为框放在一行,一列......在您的情况下,您有一个主框.cont,左侧和右侧。这是Flexbox放置的结果:

enter image description here

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

这是因为你修复了每个属性。

您可以使用absoluterelative 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>