Question

如何使两个固定元素与其兄弟元素保持一致。

<div class="left-img"> IMAGE HERE </div>  <!-- fixed positioned -->
<div class="container"> Lorem ipsum... </div>
<div class="right-img"> IMAGE HERE </div> <!-- fixed positioned -->

这是 fiddle 。到目前为止，我设置了：

top: 50%;

垂直居中。但是当窗口水平调整大小时，固定元件需要与他们的兄弟，容器保持一致。如何在jQuery或CSS中这样做？

我想过做像

这样的事情

$(window).resize(function() {
  $('img').css("right", /*size here*/);

  $('.right-side-img');
})

但我不确定如何设置窗口大小。我正在使用bootstrap所以我的所有内容都在容器中，我想设置一个图像，让它保持在每一边的中间。

Answer 1

您可以通过设置左右绝对定位元素的显式宽度并使用left / right属性的正确值来实现此目的。

<强> Example Here

.left-img,
.right-img{
    position: fixed;
    background: blue;
    top: 50%;   /*    <------ 15% ----->   */
    width: 12%; /* =  ((100% - 70%) / 2) - 3%
                         |      |     |    |
    width of the body  ---      |     |    --- needed gap for left/right (*)
    width of the container  -----     ----- get remaining width for each side */
}

.left-img { left: 3%; } /* (*) The gap between edges of the page and elements */
.right-img{ right: 3%; }

对于不相等的宽度，您可以使用CSS3 calc()函数来计算left和right属性所需的值，具体取决于每个固定定位元素的width。

<强> Example Here

.left-img {
    width: 150px;
    left: calc(15% - 150px);
}

.right-img{
    width: 100px;
    right: calc(15% - 100px);
}

值得注意的是calc() is supported in IE9+。

_{这是the old answer似乎存在误解}

定位固定元素以粘贴其兄弟的边缘

1 个答案: