时间戳

首页 > 解决方案 > 对集装箱没有高度要求的砌体布局

html - 对集装箱没有高度要求的砌体布局

问题描述

我正在尝试实现一种布局，在该布局中，我可以将元素的顺序从移动设备更改为桌面设备，但也具有砌体效果。Flexbox 让我完成了 90% 的任务，除了 2 个烦人的情况：

  1. flex row 不允许在我需要的列中进行垂直移动。
  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>

我还制作了一个肮脏的代码笔来显示基本布局。

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

由于 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/（这太接近了！该死的容器高度）

标签： htmlcssflexboxmasonry

解决方案

推荐阅读