Question

这是我的简化css代码：

＆＃13;

    <div style="display:block;border:1px solid black;padding:10px;">
    	<div style="display:inline-block;width:32%;border:1px solid black;">
    		div1
    	</div>
    	<div style="display:inline-block;width:32%;border:1px solid black;">
    		div2
    	</div>
    	<div style="display:inline-block;width:32%;border:1px solid black;">
    		div3
    	</div>
    </div>

＆＃13;

按顺序显示div：div1 div2 div3。

是否可以将其位置更改为此顺序：div2 div1 div3仅使用css？

Answer 1

添加display：flex并更改顺序css

代码

<div style="display:flex;border:1px solid black;padding:10px;">
<div style="display:inline-block;width:32%;border:1px solid black;order: 2;">
    div1
</div>
<div style="display:inline-block;width:32%;border:1px solid black;order: 1;">
    div2
</div>
<div style="display:inline-block;width:32%;border:1px solid black;order: 3;">
    div3
</div>
</div>

Answer 2

简单的解决方案是将div 2向左浮动：

＆＃13;

<div style="display:block;border:1px solid black;padding:10px;">
    <div style="display:inline-block;width:32%;border:1px solid black;">
        div1
    </div>
    <div style="display:inline-block;width:32%;border:1px solid black; float:left">
        div2
    </div>
    <div style="display:inline-block;width:32%;border:1px solid black;">
        div3
    </div>
</div>

＆＃13;

更复杂的解决方案是使容器flex并使用order属性

＆＃13;

    <div style="display:flex;border:1px solid black;padding:10px;">
        <div style="display:inline-block;width:32%;border:1px solid black;order:2;">
            div1
        </div>
        <div style="display:inline-block;width:32%;border:1px solid black;order:1;">
            div2
        </div>
        <div style="display:inline-block;width:32%;border:1px solid black;order:3;">
            div3
        </div>
    </div>

＆＃13;

Answer 3

见下面的解决方法

   <style>
   .container { display: flex;}
   .div1 { order: 2}
   .div2 { order: 3}
   .div3 {order: 1}
   </style>

   <div class="container" style="display:block;border:1px solid black;padding:10px;">
    <div class="div1" style="display:inline-block;width:32%;border:1px solid black;">
        div1
    </div>
    <div class="div2" style="display:inline-block;width:32%;border:1px solid black;">
        div2
    </div>
    <div class="div3" style="display:inline-block;width:32%;border:1px solid black;">
        div3
    </div>
   </div>

改变div位置

3 个答案: