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

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

1 个答案: