如何将元素固定在div的右侧？

Question

如何将元素固定在div的右侧？

4

我有一个按钮，希望将其位置固定在一个div的右侧。该按钮可切换其左侧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: 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>

- RoyBarOn

5个回答

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>

- Arrabidas92

1

不确定这是否是您的意思，但我只是将按钮的left属性更改为50vw，与您的灰色框相同。这里是一个演示编辑：另一种选择：position: relative和float: left而不使用left或right属性。更新后的演示

- rebecca

谢谢 - 我正在寻找一种让按钮自然飘向它的左侧div的方法......我不想依赖于视口位置。 - RoyBarOn

感谢您的时间，我选择了Rory McCrossan的解决方案 - 感谢您的好意！ - RoyBarOn

1

你使用视口单位，因此它们的值会随着视口大小（分辨率）的变化而改变。

如果你想让箭头保持在中间（并且在灰色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>

- Mihai T

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>

- Alexis

谢谢 - 但是，在我的情况下 - 按钮是包装 div 的子元素 - 我希望它的行为就像它是左侧 div 的子元素一样。 - RoyBarOn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

最简单的解决方法是将开关置于.right div内，并将其定位为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 */
}

工作示例

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