将 SVG 与其他 HTML 元素垂直对齐

Question

我需要将一行/跨度中另一个元素的 SVG 元素内联（向右）对齐，但找不到正确的公式。除非我做错了什么，否则当 SVG 不在左侧时，related SO question 的答案会失败。​​

这是jsfiddle illustration。感谢您的帮助。

<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>

Answer 1

我已经设法让你的跨度在这里彼此相邻：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;
}