更改div的位置

-1

這是我簡單的CSS代碼：更改div的位置

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

據顯示順序的div：DIV1 DIV2 DIV3。

是否可以改變它們的位置爲這個順序：div2 div1 div3只使用css？

來源

2017-02-16 Mehdi Souregi

您可以使用顯示器撓性和秩序或浮動DIV 2左 – Pete

你可以給 '浮動：左' 到DIV2 – aje

謝謝你的回答，你有沒有一個例子，或者你可以回答，如果可能的話 –

簡單的解決方案是浮動的div 2左：

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

一個更復雜的解決方案將是使容器彎曲和使用順序屬性

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

來源

2017-02-16 10:56:54 Pete

附加顯示：彎曲並改變順序的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>

來源

2017-02-16 10:56:36

請參見下面的解決方法

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

來源

2017-02-16 11:04:03 Godfather

更改div的位置

回答

相關問題