我寻求对齐等号在我的方程中。我尝试了 span 和 div,但对齐结束于内容大小 > RHS:
https://jsfiddle.net/gytmx256/6/ https://jsfiddle.net/gytmx256/6/
<span class="ctr">
<span class="lft">\(1+2\ \) </span> \(=\)
<span class="lft"> \(\ 3\)</span>
</span>
<br>
<span class="ctr">
<span class="lft">\(1+5\ \) </span> \(=\)
<span class="lft"> \(\ 6 + 2 - 2\)</span>
</span>
<br>
<span class="ctr">
<span class="lft">\(1 + 3 + 2\ \) </span> \(=\)
<span class="lft"> \(\ 6 + 2 - 2\)</span>
</span>
.ctr{position: absolute; left: 40%;}
.lft{position: relative; display: inline;}
如何为任意大小的方程对齐等号?感谢帮助。
一种选择是您可以简单地使用表格并将左侧项目浮动到右侧,即.lft {float:right:}
检查这里的工作示例:https://jsfiddle.net/r6bxgem3/ https://jsfiddle.net/r6bxgem3/
表格如下所示:
.lft {
float: right;
display: inline;
}
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.main {
flex: 80%;
background-color: white;
padding: 20px;
overflow: hidden;
position: relative;
}
.left {
flex: 20%;
background-color: #f1f1f1;
padding: 20px;
}
<head>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
</head>
<div class="row">
<div class="left">Stuff</div>
<div class="main">
<table><tr><td><span class="lft">
\(1+2\ \) <!--LHS-->
</span></td><td>\(=\) </td><td> <!--Equal sign-->
\(\ 3\) <!--RHS-->
</td></tr><tr><td><span class="lft">
\(1+5\ \)
</span></td><td>\(=\)</td><td>
\(\ 6+2-2\)
</td></tr><tr><td><span class="lft">
\(1+3+2\ \)
</span></td><td>\(=\)</td><td>
\(\ 6+2-2\)
</td></tr>
</table>
</div></div>
希望这会有所帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)