CSS ID變化

嘿，我猜這可能是相當微不足道的，但我很難找到答案或找出答案。CSS ID變化

我想創建一個網格，它們之間有任意間距的彩色方塊。這本身很容易做到，特別是因爲我只需要九個方格。但是，雖然我看着我完成的代碼，但我不禁感到有一種更加簡單高效的方法來實現這一點。

此刻，我有九個不同的ID在我的CSS中聲明，每個正方形一個。

div.container{ 
    position:relative; 
    left:50px; 
    top:50px; 
    background-color:rgb(45,45,45); 
    height:300px; 
    width:300px; 
} 

#square{ 
    position:absolute; 
    background-color:rgb(52,82,222); 
    left:20px; 
    top:20px; 
    height:80px 
    width:80px 

#square2{ 
    position:absolute; 
    background-color:rgb(58,82,22); 
    left:110px; 
    top:20px; 
    height:80px; 
    width:80px; 


etc etc etc

我想要做的是找到一個更有效的方法來做到這一點。

感謝您的幫助！

來源

2011-05-27 danem

假設內部正方形是div S，沒有其他div是你的容器內，並且每個內部div應該是相同的width和height，這是我會怎麼做：

.container { 
    position: relative; 
    left: 50px; 
    top: 50px; 
    background: rgb(45,45,45); 
    height: 300px; 
    width: 300px; 
} 
.container > div { 
    position: absolute; 
    background-color: rgb(52,82,222); 
    height: 80px; 
    width: 80px; 
} 

#square1 { 
    left: 20px; 
    top: 20px; 
} 
#square2 { 
    left: 110px; 
    top: 20px; 
} 
..

如果您需要對每個div單獨使用top和left屬性，則您別無選擇，只能使用id s。

你可以避免到class感謝添加到使用.container > div，將選擇所有div元素是.container直接孩子。

的HTML應該是這樣的：

<div class="container"> 
    <div id="square1"></div> 
    <div id="square2"></div> 
    .. 
</div>

來源

2011-05-27 21:13:08 thirtydot

如果我在廣場內包含div，該怎麼辦？ '.container> div'也會影響這些嗎？或者他們不是直接的孩子？ – danem 2011-05-27 21:53:07

'.container> div'不會影響那些。 ['>'是直接的子選擇器。]（http://reference.sitepoint.com/css/childselector）我很努力地在這裏解釋它：[http://jsfiddle.net/Mgk23/]（ http://jsfiddle.net/Mgk23/） – thirtydot 2011-05-27 21:55:04

您可以使用類共享特性廣場：

.square { 
    position: absolute; 
    width: 80px; 
    height: 80px; 
}

有沒有什麼是絕對定位它們雖然具體的原因是什麼？聽起來像一個更適合花車的工作。

div.container { 
    width: 240px; 
} 

.square { 
    float: left; 
    width: 80px; 
    height: 80px; 
}

來源

2011-05-27 21:12:41 dtbarne

我在想同樣的事情，你打我吧。 – 2011-05-27 21:17:00

沒有理由特別哈哈。我想它只是我可憐的CSS技能的證據：P 然而，我對你的答案感到困惑的是我如何聲明後續的方塊，以便它們繼承這些常量。我正在考慮像OOP這樣的事情，但似乎我不能用這種方式來解決這個問題。謝謝你和我在一起！ – danem 2011-05-27 21:50:20

爲什麼不把所有的方塊同一類和應用類似

.square 
{ 
    display: inline-block; 
    width: 80px; 
    height: 80px; 
    zoom: 1; 
    *display: inline /* for IE */ 
}

這應該使所有塊的包裝很好，而不必爲每個人添加樣式。

來源

2011-05-27 21:14:55

回答

相關問題