Курс «Блочная модель документа» Последнее испытание [23/23]


#25

Кое-что подсмотрел на форуме, до этого получалось 95% (сейчас 100%). Оказалось пропустил всего одну строчку :slight_smile:

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 520px;
    min-height: 270px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
    color: white;
    background-color: #3a78a1;
    background-image: url("/assets/course9/grid.png");
    background-repeat: repeat;
    background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display: inline-block;
    vertical-align: top;
    width: 76px;
    margin-right: 10px;
    
}
.cell {
    padding: 5px 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display: table-cell;
}
.table {
    display: table;
    border-collapse: collapse;
    border: 2px solid white;
}
.row {
    display: table-row;
}
.col-1{
    width: 96px;
}
.col-2 {
    width: 96px;
}
.col-3 {
    display: none;
}

#26

Почему в этом задании display: table-cell; строит по 2 ряда 2 столбца, а не по другому все в ряд например ?


#28
 Вот фрагмент кода из этого испытания:
 <div class="table">
            <div class="row">
                <div class="cell col-1">
                    <strong>Табличные</strong>
                </div>
                <div class="cell col-2"></div>
                <div class="cell col-3"></div>
            </div>
            <div class="row">
                <div class="cell col-1">
                    table
                </div>
                <div class="cell col-2">
                    -row<br>
                    -cell<br>
                    -column<br>
                    -caption<br>
                </div>
                <div class="cell col-3">
                    строка<br>
                    ячейка<br>
                    колонка<br>
                    заголовок<br>
                </div>
            </div>
        </div>

Обратите внимание, у двух блоков есть класс row (ряд). а в css для этих блоков есть правило:
.row {
display:table-row;
}
Поэтому рядов именно два.


#29

заходит на 100% была проблема с толщиной рамки, найдя тут варианты, решил применить к классу table - .table{border-collapse:collapse;} и все гуд.

/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
margin-right:10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display:inline-table;
width:76px;

}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display:table-cell;
width:96px;
}
.table{border-collapse:collapse;}
.row{display:table-row;}
.col-1{}
.col-2{}
.col-3{display:none;}


#30

почему у меня 3й столбец не прячется? дисплей нон прописал


#31

.col-3 поставь ниже .cell


#32

Вам нужно использовать visibility: hidden; вместо dispaly: none; для класса .col-3.


#33

100%, но ощущение, что притянуто за уши)

.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
width: 76px;
margin-right:10px;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 1px solid white;
vertical-align: top;
display: table-cell;
width: 96px;
}

.col-3 {
display: none;
}

.table {
border: 1px solid white;
display: table;
}


#34

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
width: 100px;
margin-right:10px;
box-sizing:border-box;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 1px solid white;
display: table-cell;
}
.col-1 {
width: 96px;
}
.col-2 {
width: 96px;
}
.col-3 {
display: none;
}
.table {
display:table;
border: 1px solid white;
}


#35

Маргин можно до одной строчки укоротить)

margin: 0 10px 10px 0;


#36
`/* Cтили, которые можно изменять */

.column {
width: 76px;
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
}

.cell {
display: table-cell;
width: 96px;
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.table {
display: table;
border-collapse: collapse;
}

.row {
display: table-row;
}

.col-3 {
display: none;
}`

100%. Не подглядывал.)


#37

Если использоваться в .column inline-table, можно избежать выравнивание.


#38

Мои 100% :slight_smile:

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
width: 76px;
vertical-align: top;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
width: 96px;
}
.col-3 {
visibility: hidden;
}
.table {
border-collapse: collapse;
}
.row {
display: table-row;
}


#39

А поясните, пожалуйста, роль .row { display: table-row; } . Я что-то не могу понять почему именно добавление этого элемента с 98% переносит сразу же на 100%


#40

так все сходится

/* Cтили, которые можно изменять */
.column {
width: 76px;
display: inline-block;
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
vertical-align: top;
margin-right: 10px;

}


#41

100% Без заморочек
/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 76px;
display: inline-block;
margin-right: 10px;
vertical-align: top;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 1px solid white;
}
.table {
display: table;
border: 1px solid;
}
.row {
display: table-row;
width: 80px;
}
.cell {
display: table-cell;
width: 96px;
}
.col-3 {
display: none}


#42

Два правила для .cell.


#43

зачем указывать width для row? не работает же)
и вместо того чтобы писать border: 1px 2 раза проще использовать border-collapse: collapse;


#44

.column {
margin: 0px 10px 10px 0px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
width: 76px;
}

.table {
display: table;
border-collapse: collapse;
}

.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.col-1 {
width: 96px;
}

.col-2 {
width: 96px;
}

.col-3 {
display: none;
}


#45

Чем вам dispaly: none; не нравится?
Работает ничуть не хуже. И это даже более целесообразно в данной ситуации, чем hidden.