包装时是否可以更改项目的顺序? [英] Is there a way to change the order of items when wrapping?
问题描述
我正在尝试创建网站的一部分，包括3个部分(我们称其为A，B，C)，其中A和B彼此相邻(对齐以接触容器的相对侧)，而下面它们是C，但是当A和B在容器中彼此不适合时，B会包裹在C下方，而不是在A和C之间.
I'm trying to create a part of a website, with 3 parts (let's call them A, B, C), where A and B are beside each other (aligned to touch opposite sides of a container), and below them is C, but when A, and B don't fit beside each other in the container, B wraps below C instead of between A and C.
A，B和C都具有伸缩组件，并且可以通过其他元素来调整容器的大小，因此它们的大小都是未知的.这意味着使用@media是不可能的.
A, B and C all have expanding-collapsing components, and the container can be resized by other elements, so all their sizes are unknown. This means that using @media is out of the question.
预期结果:
当A和B彼此适合时:
当他们不这样做时:
使用flexbox或grid可以实现吗?
据我所知:
Expected result:
When A and B fit beside each other:
When they don't:
Is this possible to achieve with flexbox or grid?
This is as far as I got:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flexbox black magic</title>
</head>
<body>
<div style="width:50%; border:4px solid blue; margin:8px; display: flex; justify-content: space-between; flex-wrap: wrap;">
<div style="width: 100px; height: 60px; border: 4px solid red; margin:8px;">a</div>
<div style="width: 70px; height: 30px; border: 4px solid green; margin:8px;">b</div>
<div style="width: 100%">
<div style="width: 100%; max-width: 240px; height: 100px; border: 4px solid orange; margin:8px;">c</div>
</div>
</div>
</body>
</html>
但这不仅会以错误的顺序包装元素，还会使C伸出容器.
But this not only wraps the elements in the wrong order, it also makes C stick out of the container.
推荐答案
这里是使用float的想法，是float.调整蓝色容器的大小并查看结果:
Here is an idea using float, yes float. Resize the blue container and see the result:
.box {
width: 50%;
border: 4px solid blue;
margin: 8px;
text-align: justify;
font-size:0; /* this will make sure the pseudo element won't have any size */
overflow: auto;
resize: horizontal;
}
.box > * {
font-size:initial; /* we reset the font for child element */
margin:8px;
box-sizing:border-box;
}
/* the below is used with text-align:justify to have the correct alignment on wrap */
.box::before {
content:"";
display:inline-block;
}
.box::after {
content:"";
display:inline-block;
width:100%;
}
/**/
.a {
max-width: 100px;
width: calc(100% - 16px);
height: 60px;
float:left; /* we float a */
}
.b {
width: 70px;
height: 30px;
display: inline-block;
}
.c {
height: 100px;
width: calc(100% - 16px);
max-width: 240px;
float:left; /* and we float c */
clear:left; /* don't forget this to make "c" always below "a" */
}<div class="box">
<div class="a" style="border: 4px solid red;">a</div>
<div class="c" style="border: 4px solid orange;">c</div>
<div class="b" style="border: 4px solid green;">b</div>
</div>这篇关于包装时是否可以更改项目的顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
