3

Как сделать резиновые квадратные скобки средствами HTML и CSS? При этом необходимо, чтобы данный блок был резиновый по ширине и высоте:

Матрица Сходу, в голову приходит только вариант с дополнительным вложенным блоком и с использованием псевдо-элементов after и before и с абсолютным позиционирования "миниграниц-изображений".

3 ответа 3

4

Честно скопипастил с просторов)

.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;
}
<p>Выпишем расширенную матрицу коэфицентов:</p>
<div class="equation">
  A=
  <table class="matrix">
    <tbody>
      <tr>
        <td>2</td>
        <td>-1</td>
        <td>2</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>2</td>
        <td>-3</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>-1</td>
      </tr>
      <tr>
        <td>3</td>
        <td>2</td>
        <td>3</td>
        <td>-1</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>-2</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
      <tr>
        <td>-1</td>
      </tr>
      <tr>
        <td>7</td>
      </tr>
    </tbody>
  </table>
</div>
<p>1-й шаг. Запишем элементарную треугольную матрицу L<sub>1</sub> в соответствии с формулой (10) для исключения неизвестного x<sub>1</sub> из системы:</p>
<div class="equation">
  L<sub>1</sub>=
  <table class="matrix">
    <tbody>
      <tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>-0.5</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
      </tr>
      <tr>
        <td>-1.5</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
</div>
<p>Умножим эту матрицу на расширенную матрицу коэфициентов, получим матрицу после 1-ого шага:</p>
<div class="equation">
  A<sup>(1)</sup>=
  <table class="matrix">
    <tbody>
      <tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>-0.5</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
      </tr>
      <tr>
        <td>-1.5</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>2</td>
        <td>-1</td>
        <td>2</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>2</td>
        <td>-3</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>-1</td>
      </tr>
      <tr>
        <td>3</td>
        <td>2</td>
        <td>3</td>
        <td>-1</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>-2</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
      <tr>
        <td>-1</td>
      </tr>
      <tr>
        <td>7</td>
      </tr>
    </tbody>
  </table>
  =
  <table class="matrix">
    <tbody>
      <tr>
        <td>2</td>
        <td>-1</td>
        <td>2</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>2</td>
        <td>-3</td>
        <td>1</td>
      </tr>
      <tr>
        <td>0</td>
        <td>1.5</td>
        <td>0</td>
        <td>-1</td>
      </tr>
      <tr>
        <td>0</td>
        <td>3.5</td>
        <td>0</td>
        <td>-1</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>-2</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
      <tr>
        <td>0</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>
<p>2-й шаг. Запишем элементарную треугольную матрицу L<sub>2</sub> в соответствии с формулой (10) для исключения неизвестного x2 из системы:</p>
<div class="equation">
  L<sub>2</sub>=
  <table class="matrix">
    <tbody>
      <tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>-0.75</td>
        <td>1</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>-1.75</td>
        <td>0</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
</div>
<p>Умножим эту матрицу на расширенную матрицу коэфициентов, получим матрицу после 2-ого шага:</p>
<div class="equation">
  A<sup>(2)</sup>=
  <table class="matrix">
    <tbody>
      <tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>-0.75</td>
        <td>1</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>-1.75</td>
        <td>0</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>2</td>
        <td>-1</td>
        <td>2</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>2</td>
        <td>-3</td>
        <td>1</td>
      </tr>
      <tr>
        <td>0</td>
        <td>1.5</td>
        <td>0</td>
        <td>-1</td>
      </tr>
      <tr>
        <td>0</td>
        <td>3.5</td>
        <td>0</td>
        <td>-1</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>-2</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
      <tr>
        <td>0</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
    </tbody>
  </table>
  =
  <table class="matrix">
    <tbody>
      <tr>

        <td>2</td>
        <td>-1</td>
        <td>2</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>2</td>
        <td>-3</td>
        <td>1</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>

        <td>2.25</td>
        <td>-1.75</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>5.25</td>
        <td>-2.75</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>-2</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
      <tr>
        <td>-7.5</td>
      </tr>
      <tr>
        <td>-7.5</td>
      </tr>
    </tbody>
  </table>
</div>
<p>3-й шаг. Запишем элементарную треугольную матрицу L<sub>3</sub> в соответствии с формулой (10) для исключения неизвестного x3 из системы:</p>
<div class="equation">
  L<sub>3</sub>=
  <table class="matrix">
    <tbody>
      <tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>-2.33</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
</div>
<p>Умножим эту матрицу на расширенную матрицу коэфициентов, получим матрицу после 3-ого шага:</p>
<div class="equation">
  A<sup>(3)</sup>=
  <table class="matrix">
    <tbody>
      <tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>-2.33</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>2</td>
        <td>-1</td>
        <td>2</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>2</td>
        <td>-3</td>
        <td>1</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>2.25</td>
        <td>-1.75</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>5.25</td>
        <td>-2.75</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>-2</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
      <tr>
        <td>-7.5</td>
      </tr>
      <tr>
        <td>-7.5</td>
      </tr>
    </tbody>
  </table>
  =
  <table class="matrix">
    <tbody>
      <tr>
        <td>2</td>
        <td>-1</td>
        <td>2</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>2</td>
        <td>-3</td>
        <td>1</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>2.25</td>
        <td>-1.75</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1.33</td>
      </tr>
    </tbody>
  </table>
  ·
  <table class="matrix">
    <tbody>
      <tr>
        <td>-2</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
      <tr>
        <td>-7.5</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>

Вот отсюда. Обсуждение было здесь.

2
  • Алексей, спасибо. Почти получилось ...)) Но при таком решении, при увеличении ячеек/столбцов, появляются артефакты в виде мини-границ.
    – Astor
    29 янв 2016 в 12:52
  • @Astor проверял с увеличением шрифта, вроде нормально( 29 янв 2016 в 12:55
0

Для получения 100% резины) Я бы использовал такие варианты:

1) Дивы display:table, а лучше flex с фоновой картинкой или img

<div>
    <div><!--первая скобка-->
        <div><!-- ┌ --></div>
        <div><!-- | --></div>
        <div><!-- L --></div>
    </div>
    <div><!-- контент --></div>
    <div><!--вторая скобка-->
        <div><!-- ┐ --></div>
        <div><!-- | --></div>
        <div><!-- ┘ --></div>
    </div>
</div>

2) Cвойство border-image с подготовленной картинкой. Генератор

0

Нашел более красивое, а главное оптимальное, на мой взгляд, и кроссбраузерное решение:

.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;
    }
    
<div class="b-matrix b-matrix_border">
  <table class="b-matrix__table b-matrix__table_border">
    <tr>
      <td><input class="matrix-cell" type="text" placeholder="a1,1" /></td>
      <td><input class="matrix-cell" type="text" placeholder="a1,2" /></td>
    </tr>
    <tr>
      <td><input class="matrix-cell" type="text" placeholder="a2,1" /></td>
      <td><input class="matrix-cell" type="text" placeholder="a2,2" /></td>
    </tr>
    <tr>
      <td><input class="matrix-cell" type="text" placeholder="a3,1" /></td>
      <td><input class="matrix-cell" type="text" placeholder="a3,2" /></td>
    </tr>
    <tr>
      <td><input class="matrix-cell" type="text" placeholder="a4,1" /></td>
      <td><input class="matrix-cell" type="text" placeholder="a4,2" /></td>
    </tr>
  </table>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.