Question

提前感谢您的帮助。

连续4个div，在容器DIV内（最大宽度：800px）
DIV1 - 向左浮动，固定宽度（250px）
DIV2 - 向左浮动，固定宽度（200px）
DIV3 - 没有浮动（最小宽度：200px） - 取其余部分 DIV4 - 向右浮动，固定宽度（50px）

4 divs in a row

我需要设计响应，并且窗口调整大小，
div必须垂直堆叠，按照中的顺序排列图片＆＃39; divs堆栈顺序＆＃39;娄。
请注意，div3不是固定宽度。

divs stack order

Answer 1

“order”属性仅适用于“Display：flex”属性

#main {
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
}
#main div {
     height: 80px;
     margin: 1px;
     font-size: 50px;
     text-align: center;
     padding-top: 20px;
}
#div1 {
     background-color: yellow;
     width: 250px;
     order: 1;
}
#div2 {
     background-color: lightblue;
     width: 200px;
     order: 2;
}
#div3 {
     background-color: lightgreen;
     min-width: 200px;
     order: 3;
}
#div4 {
     background-color: pink;
     width: 50px;
     order: 4;
}
@media screen and (max-width: 730px) {
       #div1 {
            width: 44%;
       }
       #div2 {
             background-color: lightblue;
             width: 40%;
             order: 2;
       }
       #div3 {
             width: 100%;
             order: 4;
       }
       #div4 {
             width: 15%;
             order: 3;
       }
}
@media screen and (max-width: 620px) {
       #div1 {
            width: 70%;
       }
       #div2 {
            width: 100%;
            order: 3;
       }
       #div3 {
             width: 100%;
             order: 4;
       }
       #div4 {
             width: 29%;
             order: 2;
       }
}
@media screen and (max-width: 420px) {
       #div1 {
            width: 100%;
        }
        #div2 {
             width: 100%;
             order: 3;
        }
        #div3 {
             width: 100%;
             order: 4;
        }
        #div4 {
             width: 100%;
             order: 2;
        }
}

<div id="main">
   <div id="div1">1</div>
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
</div>

响应divs堆栈顺序

1 个答案: