jquery - 元素的对齐和视差移动

Question

我正在尝试做如下图所示的事情。

解释如下:

我有一个最大宽度为 1920 像素的 div。在那里我有一个 8 列的网格。在那里，我想将所有元素(带有链接换行的 div)从中间对齐到左侧和右侧。红色元素就在那里。但是，现在我的问题来了，蓝色的需要上下移动一些视差效果。

红色元素目前不是问题(除了 margin-top: -100px 在缩放窗口时看起来像垃圾)。但是我无法让蓝色的显示在正确的位置，然后用视差移动它们。

重要提示:所有元素都是从数据库中动态添加的。所以我不能只做元素指定的定位。

现在这是我的一个元素的代码:

<a href="#" class="work-elem-link">
   <div class="work-elem-content span2 fposrh">
      <div class="work-elem" data-pos="210" data-move="elem-fix">
          <div class="work-elem-img" data-img="1f-h_r">
              <img class="work-elem-imgtag" src="" style="visibility:hidden"/>
          </div>
      </div>
      <div class="work-elem-details">
          <div class="work-elem-details-title">TITLE</div>
      </div>
   </div>
</a>

在元素“work-elem-content”中显示了一张图片。如果我将鼠标悬停在元素上，元素“work-elem-details”就会变得可见并显示标题。

这是该元素的 CSS 代码:

    .work-elem-content {
        position: relative;
        height: inherit;
    }
    .work-elem {
        position: absolute;
        display: block;
        width: 100%;
        height: inherit;
    }
    .work-elem-img {
        background-size: 100% !important;
        display: block; 
    }
    img.work-elem-imgtag {
        width: 100%;
    }
    .work-elem-details {
        position: absolute;
        display: none;
        width: 100%;
        background: rgba(0, 252, 163, 0.7);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;   
    }
    .work-elem-details-title {
        color: #fff;
        font-family: 'ArcherMedium';
        font-weight: bold;
        font-size: 18pt;
        text-transform: uppercase;
        text-align: center;
        padding-top: 50% 0;
        display: table-cell;
        vertical-align: middle;
    }
.fposlh {
    margin-left: 25%;
}
.fposrh {
    float: right;
    margin-right: 25%;
}
.fposlq {
    margin-left: 0;
}
.fposrq {
    float: right;
    margin-right: 0;
}
.bposl1 {
    float: left;
    margin-left: 0;
}
.bposl2 {
    float: left;
    margin-left: 12.5%;
}
.bposr1 {
    float: right;
    margin-right: 0;
}
.bposr2 {
    float: right;
    margin-right: 12.5%;
}

如您所见，我正在尝试不同的方法，但看不到我的问题所在。如果有人可以帮助我，那就太好了。我知道我的问题的内容看起来很大，但它甚至没有那么复杂。我只是试着尽可能清楚地写下我的问题。

提前致谢!

Answer 1

对于像这样的 Graphic，我会让 clear 和 float 出来并将 DIV-Container-Positions 设置为 left，top、right 和 bottom 或 left、top、width 和 高度。对此很重要:设置所有 DIV 容器 display:block;。如果您从数据库创建一些动态，正在移动或获得其他运行时效果，则需要 Javascript 来设置 CSS 属性。

<script>

var e = document.getElementById('divId');

e.style.display = 'block';
e.style.left = '50px';
e.style.top = '20%';
...

</script>

使用变量值('block', '50px')来设置新的属性。