1

我正在尝试实现这种效果：http ://codepen.io/chriscoyier/pen/wxdCD

我正在使用 SASS（.sass 语法）和 haml，虽然在我修改代码后 CodePen 中的所有内容都适用于 sass/haml，但当我将其应用于我的应用程序时，它的运行方式并不相同。我希望这些框漂浮在包含 div 内的网格中#notecardContainer

不幸的是，我刚刚加入并且没有足够高的声誉分数来发布图片，这会适得其反。但这里有一个链接：截图

本质上，这些框出现在包含的 div#notecardContainer中，但是它们严重向右偏移了包含 div 宽度的约 50%#drawer 此外，它们是垂直堆叠的，而不是水平堆叠的，并且它们不会随着屏幕的变化而弯曲尺寸。我不确定为什么它在 CodePen 中有效，但在我的代码中无效。

SASS：（注意：缩进可能无法正确转换为 StackOverflow）

#drawer 
    width: 680px
    height: auto
    margin-left: auto
    margin-right: auto

#notecardContainer
    width: inherit

.ul.box
    position: relative
    z-index: 1
    overflow: hidden
    list-style: none
    li
        position: relative
        float: left
        width: 300px
        height: 150px
        padding: 0
        border: 1px solid #000
        margin: 0 30px 30px 0
        background: #fff
        &:before,
        &:after
            content: ''
            z-index: -1
            position: absolute
        &:after
            left: auto
            right: 10px

哈姆勒：

    #notecardContainer
      %ul.box
         %li
         %li
         %li
4

0 回答 0