Варианты идентификатора CSS

#css #inheritance #position #generator

#css #наследование #позиция #генератор

Вопрос:

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

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

На данный момент у меня в моем 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

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

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

Ответ №1:

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

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

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

 div.container {
    width: 240px;
}

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

1. Я думал о том же, ты меня опередил.

2. Никаких особых причин, ха-ха. Я полагаю, это просто свидетельство моих плохих навыков работы с CSS: P Однако, что меня смущает в вашем ответе, так это то, как мне объявить последующие квадраты, чтобы они наследовали эти константы. Я думал об этом как ооп, но, похоже, я не могу подойти к этому таким образом. Спасибо, что обнажили меня!

Ответ №2:

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

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

HTML будет выглядеть следующим образом:

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

1. Что, если бы я включил divs в квадраты? .container > div Повлияет ли это и на них? Или они не являются прямыми дочерними элементами?

2. .container > div на них это не повлияло бы. > является прямым дочерним селектором. Я очень старался объяснить это здесь: http://jsfiddle.net/Mgk23

Ответ №3:

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

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

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