无需高度要求的砌体布局

问题描述

我正在尝试实现一种布局,在该布局中我可以将元素的顺序从移动设备更改为桌面设备,但也可以具有砌体效果。 FlexBox可以让我90%到达那儿,除了两个na条件:

  1. 弹性行不允许我需要的列中的垂直移动。
  2. flex列要求容器上的高度,由于项目数据的可变性,我无法控制高度。

并且我必须使此功能适用于IE11,因为我们的客户群仍在使用浏览器。

img {
    width: 100%;
    height: 100%;
}
.parent {
    Box-sizing: border-Box;
    display: flex;
    flex-flow: column;
    justify-content: center;

}
@media only screen and (min-width: 1000px) {
    .parent {
        flex-flow: row wrap;
        justify-content: flex-end;
        max-width: 1500px;
        margin: 0 auto;
    }
    #test1 {
        order: 2;
        word-break: break-all;
        max-width: calc(45% - .5em);
    }
    #test2 {
        order: 1;
      max-width: calc(45% - .5em);
    }
    #test3 {
        order: 4;
      max-width: calc(45% - .5em);
    }
    #test4 {
        order: 3;
      max-width: calc(45% - .5em);
    }
    #test5 {
        order: 5;
      max-width: calc(45% - .5em);
    }
    .styling {
        min-width: calc(45% - .5em);
        margin: 0;
    }
}
.styling {
    border: 1px solid black;
    padding: 1em;
    margin: .5em .5em;
    overflow: hidden;
    width: auto;
}
#test1 {
    text-align: left;

    word-break: normal;
}

#test3 {
    word-break: normal;
}
#test4 {
  word-break: normal;
}
<body>
    <div class="parent">
        <div class="styling" id="test1"><h1>
            Title of Item That Could be Really Long so That it Wraps Around to Multiple Lines
        </h1></div>
        <div class="styling" id="test2"><img src="https://via.placeholder.com/400x400" alt="product image"></div>
        <div class="styling" id="test3"><p>
            Item price
        </p> <p>
            decoration
        </p> <p>
            size
        </p> <p>
            quantity
        </p> <p>
            CTA
        </p></div>
        <div class="styling" id="test4">
            <p>
                Item Description details
            </p>
            <p>
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </p>
        </div>
      <div class="styling" id="test5"><p>Reviews</p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      </div>
    </div>
</body>
</html>

我还做了一个肮脏的codepen以展示基本布局。

我遇到的问题是,当我希望其余的价格和尺寸向上滑动并填充空白时,标题所占据的垂直空间与桌面宽度上的图像一样大。我需要标题与项目信息的其余部分分开,以便标题显示在移动版本的图像上方。

由于IE11的操作必须尽可能简单,所以我不能做任何太现代的事情。有人有建议吗? Javascript不是我的强项,因此到目前为止,我都避免使用它。但是,是否有任何Javascript可以调整第二个div的高度,以使下面的其他元素向上滑动。这就是我要让我的一天再次快乐的全部。

任何对阅读有益的建议都将受到欢迎。

这是我到目前为止研究的内容

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/(我正在研究flexBox布局中的Order-shifted元素,但它会触发IE11中的ActiveX块)

https://jsfiddle.net/q5e20knd/15/(网格,没有bueno IE11)

https://codepen.io/desandro/pen/osFxj(无外部库)

https://www.flexboxpatterns.com/mosaic(容器上的高度)

https://tobiasahlin.com/blog/masonry-with-css/(这真是太好了!该死的容器高度)

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)