Question

我有一些文字，我想用它后面的“V”显示并浮动到右边。文本是电压（因此是V）。它有一个id，用JavaScript计算。

我确信有一种巧妙的方法可以做到这一点，但我没有经验，过于复杂的事情而且没有到达任何地方！

我试过了：

<h3><span id="voltsSensor2"; style="float:right" >2.99</span>V</h3>

但是因为V在跨度之外它保持不变。

我也试过让h3标签全部浮在css中，但由于某种原因它将文本放在div区域之外，这是一个带有我在css中定义的边框的框，如下例所示：

<div class="ex">
    <h1 id = nameS1>Sensor 2</h1>
    <h2>Temperature</h2>
    <h3><span id="tempSensor2">18.5</span>&#176C</h3>

    <div style="width:255px; height:13px; background-color:#ddd;">
        <div id ="barTempS2" style="width:60px; height:13px; background-color:#366; border-right:1px white solid;"></div>
    </div>

    <h2>Humidity</h2>
    <h3><span id="humSensor2">55.0</span>%RH</h3>

    <div style="width:255px; height:13px; background-color:#ddd;">
        <div id ="barHumS2" style="width:140px; height:13px; background-color:#366"></div>
    </div>

    <h4><span id="voltsSensor1">2.99</span>V</h4>
    <img src="images/greyCornerRhb.png" width="12" height="12" alt="Sensor Name"; style="float:right">
</div>

我确信有一种更简单的方法。我会感激一些帮助。

Answer 1

您应该在父元素上使用text-align: right;并丢失float。

Answer 2

试试这个：

<h3 style="float:right"><span id="voltsSensor2">2.99</span>V</h3>
<div style="clear: both"></div>

JSFiddle：http://jsfiddle.net/BJPUv/

clear:both div将允许浮动元素的高度，因此它们不会漂浮在div之外。

Answer 3

你可以轻松做的两件事。要么将V粘贴在自己的跨度中，要为两个跨距指定位置：relative和float：right。或者只是将V放在数字的范围内。计算完值后，可以在js代码中附加“V”。

float：正确使用css - 必须有一个简单的方法来做到这一点

3 个答案: