使用多個div來定位絕對和浮動左邊問題

讓我們假設我有n類，每個類都必須有一個絕對位置並向左浮動。使用多個div來定位絕對和浮動左邊問題

.test { 
 
    position:absolute; 
 
    display:block; 
 
    float:left; 
 
}

<div class="test">test</div> 
 
    <div class="test">test</div> 
 
    <div class="test">test</div> 
 
    <div class="test">test</div>

如果我使用此代碼串「測試」是一個在另一個之上。我想把它們排列在一起。我必須使用position:absolute。有沒有辦法做到這一點？我認爲它與具有position: absolute的約束

來源

2015-11-06 Chester

你缺少你的測試類的最後一個「講話標誌。如果你想對齊它們並排他們的屬性位置上，下，左，右。 – RyanM

爲什麼 – Paran0a

你能解釋一下爲什麼你必須使用position：absolute嗎？ – LinkinTED

一種方式是一個寬度爲每個div的，並相應地給他們的位置。

顏色只是顯示每個div如何延伸。

.test1, 
 
.test2, 
 
.test3, 
 
.test4 { 
 
    position:absolute; 
 
    width: 50px; 
 
} 
 

 
.test1 { 
 
    left: 0; 
 
    background: red; 
 
} 
 

 
.test2 { 
 
    left: 50px; 
 
    background: blue; 
 
} 
 

 
.test3 { 
 
    left: 100px; 
 
    background: yellow; 
 
} 
 

 
.test4 { 
 
    left: 150px; 
 
    background: green; 
 
}

<div class="test1">test1</div> 
 
<div class="test2">test2</div> 
 
<div class="test3">test3</div> 
 
<div class="test4">test4</div>

來源

2015-11-06 07:46:44 Sinstein

這是一個「靜態版本」，但我說如果我有N個類「測試」。我能用css完成嗎？ – Chester

恐怕不是。因爲他們都會有同一班。當你使用'position：absolute'時，你將字元放在一個位置，考慮到屏幕是一個網格。如果你想在不同的位置放置不同的物品，你不能一起做。 – Sinstein

您可以分別標識每一個並根據它們進行定位。我真的不明白爲什麼你需要'position：absolute'，但也許你可以把所有'div'封裝在'div'中。將父div標記爲絕對位置，並使用簡單的'display：inline-block'將所有內部div對齊。這對你有用嗎？ – Sinstein

如果必須使用的位置是：絕對看不到的方式只用CSS來做到這一點。一兩件事你可以做的，是動態地計算每個項目的位置在JS並添加每個DIV下面的代碼：

var translate3D = "translate3d(" + translateX + "px," + translateY + "px,0px)"; 

var elementStylePointer = elementDom.style; 
elementStylePointer.webkitTransform = translate3D; 
elementStylePointer.transform = translate3D;

這樣你可以有N個div的，每個人都會得到X，Y座標，你會在頁面加載之前計算。

來源

2015-11-06 07:57:51 Bergerova

你可以添加父母絕對測試。

.abs{ 
 
    position:absolute; 
 
    left:100px; 
 
    top:100px; 
 
} 
 
.test{ 
 
    float:left; 
 
    display:block; 
 
    border: 1px solid; 
 
    margin: 10px; 
 
}

<div class="abs"> 
 
<div class="test">test</div> 
 
<div class="test">test</div> 
 
<div class="test">test</div> 
 
<div class="test">test</div> 
 
</div>

來源

2015-11-06 08:19:54

使用多個div來定位絕對和浮動左邊問題

回答

相關問題