Варианты CSS ID

Question

Эй, я предполагаю, что это, вероятно, довольно тривиально, но мне все же трудно найти ответ или выяснить его, тем не менее.

Я пытаюсь создать сетку из цветных квадратов с произвольным интервалом между ними.Само по себе это легко сделать, особенно потому, что мне нужно всего девять квадратов.Но хотя я смотрю на свой законченный код, я не могу помочь, но чувствую, что есть гораздо более простой и эффективный способ сделать это.

На данный момент у меня есть девять различных идентификаторов, объявленных в моем 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

Я хотел бы найти более эффективный способ сделать это.

Спасибо за помощь!

Answer 1

Вы можете использовать класс для квадратов, которые имеют общее свойство:

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

Есть ли конкретная причина, по которой вы их абсолютно позиционируете?Похоже, работа лучше подходит для поплавков.

div.container {
    width: 240px;
}

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

Answer 2

Предполагая, что внутренние квадраты равны div с, внутри вашего контейнера нет других 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;
}
..

Если вам нужны отдельные свойства top и left для каждого div, то у вас нет другого выбора, кроме как использовать id s.

Вы можете избежать добавления class благодаря использованию .container > div, который выбирает все div элементы, которые являются прямыми потомками .container.

HTML будет выглядеть так:

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

Answer 3

Почему бы не присвоить всем квадратам один и тот же класс и применить что-то вроде

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

Это должно привести к тому, что все блоки будут красиво обернуты без необходимости добавлять стили для каждого человека.