1

我有一个由Isotope JS定位的元素的网格布局，这是该项目的要求。它工作得很好，但是“同位素”的元素是使用position: absoluteCSS3 变换定位的。

我正在尝试将另一个 div 动态放置在网格的某一行下方。这与谷歌图像的布局非常相似——有一个图像网格，当单击它时，会在该图像行下方弹出一个横跨页面宽度的黑框。

这是一个 jsfiddle，其中包含我正在尝试完成的示例：http: //jsfiddle.net/TfWdk/1/

绿色 div 代表弹出框。我将在使用 javascript 单击的文章之后动态插入它。问题是，正如您在小提琴中看到的那样，它不会正确放置，因为项目（红色框）的位置是position: absolute.

这里唯一的要求是使用同位素，因此项目必须具有小提琴中存在的绝对定位和 CSS3 变换。如果有一些同位素设置可以解决这个问题，我愿意接受。我目前正在制定的解决方案涉及使用 javascript 将单击的行下方的每个元素向下推，使用 javascript 定位下拉列表，然后显示它。显然，我更喜欢一种解决方案，它只涉及在页面上插入下拉 HTML 并让浏览器进行定位。

另请注意，我正在使用 webkit 转换，所以这在 Firefox/IE 中可能看起来很有趣。

4

1 回答 1

2

这应该做你需要的：

http://jsfiddle.net/ytVvW/

.container {
    width: 866px;
    height: 600px;
    border: 1px solid #ccc;
    position: relative;
}

.item {
    width: 274px;
    height: 180px;
    margin: 5px;
    float: left;
    border: 1px solid red;
    position: absolute;
    top: 0;
    left: 0;
}

.overlay {
    width: 100%;
    height: 50px;
    background-color: #333;
    position: absolute;
    float: left;
}

.dropdown {
    width: 100%;
    height: 40px;
    background-color: green;
    display: block;
    top: 190px;
    position: relative;
}

.row {
    position: relative;
}

#tl { -webkit-transform: translate3d(0px, 0px, 0px); }
#tc { -webkit-transform: translate3d(290px, 0px, 0px); }
#tr { -webkit-transform: translate3d(580px, 0px, 0px); }
#bl { -webkit-transform: translate3d(0px, 203px, 0px); }
于 2013-03-24T23:28:19.077 回答