Оцените пожалуйста код! 18/18!

Курсы §29. Таблицы на CSS
1

/* Небольшая подсказка, дальше сами */
article {
width: 470px;
height: 273px;
}

article {
display: table;
background: url(“img/wood.png”);
border-collapse: separate;
border-spacing: 15px;
border: 5px solid #686868;
margin: 10px;
}

article ul {
display: table-row;
background: url(“img/wall-1.png”);

}

ul:last-child {
background: url(“img/wall-2.png”);
}

article li {
display: table-cell;
text-align: center;
border: 10px solid #686868;
vertical-align: middle;
}

li:nth-child(1) {
width: 110px;
}

li:nth-child(2) {
width: 90px;
}

li:nth-child(3) {
width: 150px;
}

И можете пожалуйста объяснить, как сделать так, чтобы при увеличении размера article, не изменялся размер клеточек?

2
Для сравнения 
article {
    width: 470px;
    display: table;
    margin: 10px;
    background: url("img/wood.png");
    border-spacing: 15px;
    border: 5px solid #686868;
}

article ul {
    display: table-row;    
    background: url("img/wall-1.png")
}
article ul:last-child {
    background: url("img/wall-2.png")
}

article li {
    display: table-cell; 
    text-align: center;
    vertical-align: middle;
    padding: 20px ;
    border: 10px solid #686868;
}

article li:first-child {
    width: 70px;
}
article li:last-child {
    width: 110px;
}

Вопрос не понятен:
article – теперь таблица.
Увеличиваете размер таблицы – изменяются размеры ячеек пропорционально.
Размерами ячеек в разумных пределах можно управлять свойствами border-spacing для таблицы, и padding, width, height для ячеек…

1 лайк
3

Спасибо, я просто забыл, что article стал таблицей!

4

У меня почти так же получилось, только все таки для читабельности, мне кажется, лучше задавать отдельно рядам бэкграунды и почему-то без вертикального выравнивания все работает :thinking:

мой вариант 
article {
    display: table;
    width: 470px;
    margin: 10px;
    background-image: url('img/wood.png');
    border-spacing: 15px;
    border: 5px solid #686868;
}

article ul {
    display: table-row;
}

article ul:first-child {
    background-image: url('img/wall-1.png');
}

article ul:last-child {
    background-image: url('img/wall-2.png');
}

article li {
    display: table-cell;
    text-align: center;
    padding: 20px;
    border: 10px solid #686868;
}

article li:first-child {
    width: 70px;
}

article li:last-child {
    width: 110px;
}
1 лайк
5

видимо за счет padding:20px вертикально выравнивать не требуется

6

В этом испытании у картинок одинаковые размеры, поэтому кажется, что они выравниваются свойством padding.

При других размерах картинок без vertical-align: middle;
2018-11-21_175015

При других размерах картинок с vertical-align: middle;
2018-11-21_174812

1 лайк