#html #css
Как сделать резиновые квадратные скобки средствами HTML и CSS? При этом необходимо,
чтобы данный блок был резиновый по ширине и высоте:
Сходу, в голову приходит только вариант с дополнительным вложенным блоком и с использованием
псевдо-элементов after и before и с абсолютным позиционирования "миниграниц-изображений".
Ответы
Ответ 1
Честно скопипастил с просторов)
.equation {
margin-left: 3em;
}
.matrix {
display: inline-table;
border: solid #000;
border-width: 0 1px;
border-collapse: collapse;
vertical-align: middle;
*display: inline;
/* для IE7-, чтоб ему( */
*margin-right: .25em;
/* туда же, чтоб пробелы не "съедал" */
}
.matrix tr:before,
.matrix tr:after {
display: table-cell;
content: '\a0';
width: .25em;
}
.matrix tr:first-child:before,
.matrix tr:first-child:after {
border-top: 1px solid #000;
}
.matrix tr+tr+tr+tr:before,
.matrix tr+tr+tr+tr:after {
border-bottom: 1px solid #000;
}
.matrix td {
min-width: 1em;
padding: 0 .25em;
text-align: center;
border: 0;
}
.sup,
.sub {
font-size: 75%;
line-height: 1px;
}
Выпишем расширенную матрицу коэфицентов:
A=
| 2 |
-1 |
2 |
0 |
| 0 |
2 |
-3 |
1 |
| 1 |
1 |
1 |
-1 |
| 3 |
2 |
3 |
-1 |
·
1-й шаг. Запишем элементарную треугольную матрицу L1 в соответствии
с формулой (10) для исключения неизвестного x1 из системы:
L
1=
| 1 |
0 |
0 |
0 |
| 0 |
1 |
0 |
0 |
| -0.5 |
0 |
1 |
0 |
| -1.5 |
0 |
0 |
1 |
Умножим эту матрицу на расширенную матрицу коэфициентов, получим матрицу после
1-ого шага:
A
(1)=
| 1 |
0 |
0 |
0 |
| 0 |
1 |
0 |
0 |
| -0.5 |
0 |
1 |
0 |
| -1.5 |
0 |
0 |
1 |
·
| 2 |
-1 |
2 |
0 |
| 0 |
2 |
-3 |
1 |
| 1 |
1 |
1 |
-1 |
| 3 |
2 |
3 |
-1 |
·
=
| 2 |
-1 |
2 |
0 |
| 0 |
2 |
-3 |
1 |
| 0 |
1.5 |
0 |
-1 |
| 0 |
3.5 |
0 |
-1 |
·
2-й шаг. Запишем элементарную треугольную матрицу L2 в соответствии
с формулой (10) для исключения неизвестного x2 из системы:
L
2=
| 1 |
0 |
0 |
0 |
| 0 |
1 |
0 |
0 |
| 0 |
-0.75 |
1 |
0 |
| 0 |
-1.75 |
0 |
1 |
Умножим эту матрицу на расширенную матрицу коэфициентов, получим матрицу после
2-ого шага:
A
(2)=
| 1 |
0 |
0 |
0 |
| 0 |
1 |
0 |
0 |
| 0 |
-0.75 |
1 |
0 |
| 0 |
-1.75 |
0 |
1 |
·
| 2 |
-1 |
2 |
0 |
| 0 |
2 |
-3 |
1 |
| 0 |
1.5 |
0 |
-1 |
| 0 |
3.5 |
0 |
-1 |
·
=
| 2 |
-1 |
2 |
0 |
| 0 |
2 |
-3 |
1 |
| 0 |
0 |
2.25 |
-1.75 |
| 0 |
0 |
5.25 |
-2.75 |
·
3-й шаг. Запишем элементарную треугольную матрицу L3 в соответствии
с формулой (10) для исключения неизвестного x3 из системы:
L
3=
| 1 |
0 |
0 |
0 |
| 0 |
1 |
0 |
0 |
| 0 |
0 |
1 |
0 |
| 0 |
0 |
-2.33 |
1 |
Умножим эту матрицу на расширенную матрицу коэфициентов, получим матрицу после
3-ого шага:
A
(3)=
| 1 |
0 |
0 |
0 |
| 0 |
1 |
0 |
0 |
| 0 |
0 |
1 |
0 |
| 0 |
0 |
-2.33 |
1 |
·
| 2 |
-1 |
2 |
0 |
| 0 |
2 |
-3 |
1 |
| 0 |
0 |
2.25 |
-1.75 |
| 0 |
0 |
5.25 |
-2.75 |
·
=
| 2 |
-1 |
2 |
0 |
| 0 |
2 |
-3 |
1 |
| 0 |
0 |
2.25 |
-1.75 |
| 0 |
0 |
0 |
1.33 |
·
Ответ 2
Для получения 100% резины) Я бы использовал такие варианты:
1) Дивы display:table, а лучше flex с фоновой картинкой или img
2) Cвойство border-image с подготовленной картинкой. Генератор
Ответ 3
Нашел более красивое, а главное оптимальное, на мой взгляд, и кроссбраузерное решение:
.b-matrix {
position: relative;
margin: 0 30px 25px 0;
padding: 2px 4px;
border-left: 2px solid #444;
border-right: 2px solid #444;
position: relative;
display: inline-block;
}
/*-----border-----*/
.b-matrix_border:before,
.b-matrix_border:after,
.b-matrix__table_border:before,
.b-matrix__table_border:after {
position: absolute;
display: block;
width: 8px;
height: 2px;
background: #444;
content: '';
}
.b-matrix_border:before { top: 0; left: 0; }
.b-matrix_border:after { top: 0; right: 0; }
.b-matrix__table_border:before { bottom: 0; left: 0; }
.b-matrix__table_border:after { bottom: 0; right: 0; }
/*-----border end-----*/
.matrix-cell {
display: block;
width: 40px;
height: 40px;
border: 1px solid #ddd;
text-align: center;
}
Комментариев нет:
Отправить комментарий