改变div位置

时间:2017-02-16 10:52:38

标签: html css

这是我的简化css代码:



    <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;
&#13;
&#13;

按顺序显示div:div1 div2 div3。

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

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

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

见下面的解决方法

   <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>