使用css改變HTML元素的順序

如果下面的東西有一個特定的名稱，請告訴我，這樣我可以做一些適當的研究（到目前爲止，從我的搜索中得到的是z索引是完全不同的東西）。使用css改變HTML元素的順序

好的，請考慮以下情況。你有：

<div class="foo">Foo</div> 
<div class="bar">bar</div>

假設類是在css表中定義的，所以當你添加另一個css表時他們改變。

對於字體，顏色，bg等屬性，我很清楚。

問題是如何修改他們的位置。考慮我需要以下輸出：（您只能更改CSS）'Foo'爲第二個，'bar'爲第一個。 'foo'和'bar'在一行上。 PS：如果有一個特定的名稱（用css樣式改變位置），請告訴我。

2013-07-27 Bloodcount

改變指數是不可能通過CSS，你可以只是他們的風格：

像

.foo{ position: relative; top: 20px;} 
.bar{ position: relative; top: -20px;}

還有一個進一步您就可以使用這個例子中的包裝做到這一點：

2013-07-27 05:48:33 Hushme

有趣。這可能是我正在尋找的。 – Bloodcount

多數民衆贊成 – Hushme

可能是更好地使用'em'而不是'px'的單位，更強大的方式。 – steveax

你有幾個選項來定位div與CSS。

position就是其中之一。

如需更靈活的解決方案，您還可以使用float。

無論您需要在正確的分配float:right;

無論您需要在左邊分配float:left;

演示

2013-07-27 05:52:34 user1721135

嘗試操縱位置的CSS屬性與頂部，左側，底部，右側按需要。如果你想讓它們水平連續一個接一個，你可以嘗試float：left

2013-07-27 05:53:57

是的，你必須使用CSS浮點數來實現它。

浮動只是簡單地推動元素到指定的方向，並根據可用空間堆疊起來。

要得到你需要應用這個結果，

.foo, .bar { float: right; }

請確保您有這些標籤包裹在父元素，並使其爲inline-block的，否則他們會浮到滿塊的結束

2013-07-27 05:57:13

回答