Достаточно интересный способ организации обычного маркированного списка в две колонки.

Имеется определенное количество элементов

1
li
списка
1
ul
. Нужно организовать все
1
li
в две колонки. Первое, что приходит на ум - это воспользоваться новыми правилами CSS3.

Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться CSS2 и этот способ был случайно мною “подсмотрен” на сайте Loco.ru у автора dIrm. Мною этот способ был немного доработан и помещен у себя в качестве копилки.

Итак, имеется обычный маркированный список в виде HTML-разметки. Количество элементов

1
li
я специально сделал нечетным:

<ul>
  <li>Колонка 1</li>
  <li>Колонка 2</li>
  <li>Колонка 3</li>
  <li>Колонка 4</li>
  <li>Колонка 5</li>
  <li>Колонка 6</li>
  <li>Колонка 7</li>
  <li>Колонка 8</li>
  <li>Колонка 9</li>
  <li>Колонка 10</li>
  <li>Колонка 11</li>
</ul>

Сделаем CSS-стилизацию списка, ничем не примечательную. Класс

1
.clearfix
добавим в HTML-разметку для элемента
1
ul
- это классическая очистка потока для плавающих потомков внутри блока-родителя. Элементы
1
li
у нас будут плавать внутри
1
ul
:

ul{
  list-style-type: none;
  width: 398px;
  margin: 100px auto;
  border: 1px solid #000;
  font: bold italic 16px/30px Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
}

.clearfix:after{
  clear: both;
}

Вот теперь немного интереснее, когда приступим к элементу

1
li
. Вся “фишка” в организации их в два столбца благодаря двум CSS-правилам -
1
display: block
и
1
width: 45%
.

Все элементы сделаем плавающими влево

1
float: left
, поэтому CSS-правило
1
display: block
можно опустить за ненадобностью, но оставим его для наглядности примера. Получается, что каждый из элементов
1
li
является блочным, с фиксированной шириной и плавает влево.

В результате все эти элементы располагаются “по порядку”. “Колонка 1” в левом верхнем углу, следом за ним - “Колонка 2”. “Колонка 3” не вмещается по ширине в область блока-родителя, поэтому располагается под “Колонка 1”. Далее - опять все по порядку. Три правила

1
padding-bottom: 10px
,
1
text-align: center
,
1
background-color: #556677
- для красоты добавляем:

ul li{
  display: block;
  float: left;
  width: 45%;
  padding-bottom: 10px;
  text-align: center;
  background-color: #556677;
}

Ну и в конце еще несколько штрихов для придания полной иллюзии двухколоночного текста. Здесь воспользуемся правилом

1
nth-child
с аргументом
1
even
, чтобы избежать дополнительной нагрузки на разметку в виде классов, которые придется добавлять в противном случае:

li:nth-child(even){
  margin-left: 10%;
  background-color: #667788;
}

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017