问题描述
我正在尝试实现一种布局,在该布局中我可以将元素的顺序从移动设备更改为桌面设备,但也可以具有砌体效果。 FlexBox可以让我90%到达那儿,除了两个na条件:
- 弹性行不允许我需要的列中的垂直移动。
- 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/(这真是太好了!该死的容器高度)
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)