調整多個div在絕對定位

我有一個小問題，我有4個格具有固定的寬度和50像素的高度和定位絕對的。樣品佈局是2×2調整多個div在絕對定位

它們手動它們之間的定位10px的間隙。問題是，如果我需要調整這些框的大小，我將不得不單獨調整它們的大小，並重新計算它們之間的空間，因爲它們是絕對定位的，並且會讓我擁有的div更多。我被告知Sass可能會幫助我解決這個問題。所以我試圖使用Sass來幫助，但我不知道如何去做這件事。

一個例子：

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="test.css"/> 
    <title></title> 
</head> 
<body> 
    <div class="section"> 
     <div class="box" id="box-position-1"></div> 
     <div class="box" id="box-position-2"></div> 
     <div class="box" id="box-position-3"></div> 
     <div class="box" id="box-position-4"></div> 
    </div> 

</body> 
</html>

CSS：

.section { 
    position: relative; 
} 

.box { 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    border: 1px solid #000; 
} 

#box-position-3, 
#box-position-4 { 
    top: 60px; 
} 

#box-position-2, 
#box-position-4 { 
    left: 60px; 
}

來源

2014-02-26 TJXStyles

我的第一個問題是他們真的必須是位置：絕對;？你期望的視覺和功能結果是什麼，因爲我敢打賭，你可以用不同的方式做到這一點。表格單元格的聲音可能適用。 – Michael

通過調整框的大小，你的意思是什麼？ – Huangism

請問爲什麼divs絕對定位？ – LcSalazar

而不是使用絕對定位的，你可以嘗試像float或display: inline-block（甚至表）將使您的div商品流動到一起，而無需手動調整彼此之間的距離，或者爲每件商品使用單獨的ID。

有多種解決方案，您可以試試。我建議使用表格解決方案，但這可能會根據您的需求而有所不同。

使用浮動：

入住這JSFiddle

這是最簡單的設置！只需將float: left;添加到您的.box課程中即可。這將允許DIV元素自動將它們自己一個接一個地定位。添加margin: (number)px;以便將這些框相互隔開特定的距離。

使用嵌入式塊：

Check out this JSFiddle

同上！只需添加display: inline-block而不是float。這樣會像文本一樣處理div，因此如果您打算將這些框插入包含文本的塊中，請小心。

使用表格：

這是最certianly去的最佳途徑。

Here's a JS fiddle.

表非常有據可查的，所以不是解釋該代碼（這是比原來完全不同），我會爲你提供一些資源。

http://www.temple.edu/cs/web/tables.html

http://www.w3schools.com/html/html_tables.asp （我知道人們討厭W3Schools的，但這篇文章似乎罰款）

編輯：肉桂使得該表是潛在的令人沮喪取決於其使用的地步。在決定使用哪種方法之前，請查看此Stackoverflow question。

祝你好運。

另一注意：在你的評論中，你描述你正在創建一個平面圖。我建議使用SVG圖像來說明這一點，而不是HTML。

來源

2014-02-26 20:58:20

永遠不要推薦表格進行佈局。請不要將額外的頁面排名提供給不受歡迎的來源（請參閱：http://w3fools.com/）。 – cimmanon

@cimmanon爲什麼你不應該使用表格佈局？即使如此，我提供了另外兩個解決方案。至於鏈接w3schools，我鼓勵你閱讀這個頁面，並找出任何問題。我輕而易舉地檢查了一下，對我來說這似乎很好。如果沒有，我還提供了temple.edu的其他鏈接，以防您錯過了它。 –

今年是什麼，我們仍然有人問你爲什麼不應該使用表格進行佈局？我的意思是，除了W3C說不回到[HTML 4規範]（http://www.w3.org/TR/html401/struct/tables.html）這個事實？ http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – cimmanon

調整多個div在絕對定位

回答

相關問題