С этим заданием мне пришлось повозиться, даже сейчас есть моменты, которые я пока не могу объяснить словами наверное потому, что поленился изучить подробно HTML-код.
С первыми двумя блоками у меня не возникло проблем. Мы видим 2 контейнера div с классом collum. С помощью сетки мы видим, что их ширина фиксирована и они занимают 100px. Первым делом задаем эту ширину, затем нужно их расположить в одной плоскости, для этого меняем задаем им режим отображения display: inline-block, выравниваем по верхнему краю vertical-align: top. Для того чтобы на размер блока не влияли наши внутренние отступы воспользуемся уже знакомым box-sizing: border-box, ну и в конце задаем правый внешний отступ в 10px.
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 100px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
margin-right: 10px;
}
Идем дальше. Мы видим div с классом table - это наша таблица. Первым делом стоит разобраться с режимом отображения, в этом нам поможет display: table-cell; (честно сказать подбирал наугад), дальше определяем размер таблицы, отнимаем 2px рамку и задаем ширину width: 118px, и конечно же задаем box-sizing: border-box, иначе ширина ячеек будет с учетом внутренних отступов.
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
width: 118px;
box-sizing: border-box;
}
Далее скрываем ненужную нам колонку:
.col-3 {
display: none;
}
Почти готово. И на этом этапе у меня возникли проблемы, я никак не мог понять почему не схлопываются границы таблицы, ведь я все делаю верно. Долго мучился и полез искать подсказки, оказалось, что свойство border-collapse: collapse не работает с режимом отображения table-cell, в задачу я решил, но объяснить почему так, пока не могу. Но вот так заработало.
.table {
border-collapse: collapse;
}.row {
display: table-row;
}
Задача выполнена на 100%, но у меня все еще остались вопросы, слишком все запутано как-то.