我需要在行/跨度中将SVG元素与其他元素对齐（在右侧），而找不到正确的公式。除非我做错了，否则当SVG不在左侧时，此相关SO问题的答案将失败。
这是一个jsfiddle插图。感谢您的协助。
<div style="border: 1px solid black; height: 100px; width: 200px; vertical-align:top;">
<span height=100 float=left><p>text on left</p></span>
<span height=100 float=right>
<svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin">
<rect x="0" y="0" width="100" height="100" style="fill: red;" />
</svg>
</span>
</div>
我设法在这里使您的跨度彼此相邻：http : //jsfiddle.net/J8sPs/6/
这是最终代码：
HTML：
<div>
<span class="flt"><p>text on left</p></span>
<span class="frt">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin">
<rect x="0" y="0" width="100" height="100"/>
</svg>
</span>
</div>
CSS：
div {
border: 1px solid black;
height: 100px;
width: 200px;
vertical-align: top;
}
span {
width: 100px;
height: 100px;
}
.flt {
float: left;
}
.frt {
float: right;
}
rect {
fill: red;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句