html / css用于围绕数学矩阵的括号 – 更喜欢轻量级

前端之家收集整理的这篇文章主要介绍了html / css用于围绕数学矩阵的括号 – 更喜欢轻量级前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在用html写一些数学.我想以小而轻的方式做到这一点.这就是我到目前为止所拥有的.它使矩阵很好,但有没有办法可以做一个通常在矩阵周围看到的括号?
  1. For example,if <b>A</b> is the matrix
  2. <br>
  3. <br>
  4. <div align=center>
  5. <table>
  6. <tr>
  7. <td>1+3i</td>
  8. <td>2+i</td>
  9. <td>10</td>
  10. </tr>
  11. <tr>
  12. <td>4-3i</td>
  13. <td>5</td>
  14. <td>-2</td>
  15. </tr>
  16. </table>
  17. </div>
  18. <br>

解决方法

演示: http://jsfiddle.net/NQ6ww/38/

通过CSS使用:before和:after伪元素来模拟方括号.

  1. .matrix {
  2. position: relative;
  3. }
  4. .matrix:before,.matrix:after {
  5. content: "";
  6. position: absolute;
  7. top: 0;
  8. border: 1px solid #000;
  9. width: 6px;
  10. height: 100%;
  11. }
  12. .matrix:before {
  13. left: -6px;
  14. border-right: 0;
  15. }
  16. .matrix:after {
  17. right: -6px;
  18. border-left: 0;
  19. }
  1. <div align=center>
  2. <table class="matrix">
  3. <tr>
  4. <td>1+3i</td>
  5. <td>2+i</td>
  6. <td>10</td>
  7. </tr>
  8. <tr>
  9. <td>4-3i</td>
  10. <td>5</td>
  11. <td>-2</td>
  12. </tr>
  13. </table>
  14. </div>

猜你在找的HTML相关文章