Question

我对前端方面有点新意，所以请原谅我，如果我忽视了一些简单的事情。

这是我正在构建的React应用程序，它将在屏幕上显示多个图标。一个从传感器读取当前温度。我想在右上角显示单位（C或F），在右下角显示传感器读数。

我的HTML代码：

<div className='app-icon-temp'>
    <div className='icon-temp-current'>00.00</div>
    <div className='icon-temp-unit'>C</div>
</div>

我的CSS代码：

.app-icon-temp {
    width: 115px;
    height: 115px;
    position:relative;
}
.icon-temp-current {
    position:absolute;
    bottom:0;
    right:0;
    padding:10px;
}
.icon-temp-unit {
    position:absolute;
    top:0;
    right:0;
    padding:10px;
}

第一个div位于右下角，但是，左上角的第二个div位置。我需要将此项目移到右上角。

造成这种不一致的原因是什么？

Answer 1

将app-icon-temp更改为.app-icon-temp 和className到类

如果仍然出现任何错误，请将正确的代码复制到问题中吗？

.app-icon-temp {
    width: 115px;
    height: 115px;
    position:relative;
}
.icon-temp-current {
    position:absolute;
    bottom:0;
    right:0;
    padding:10px;
}
.icon-temp-unit {
    position:absolute;
    top:0;
    right:0;
    padding:10px;
}

<div class="app-icon-temp">
    <div class="icon-temp-current">00.00</div>
    <div class="icon-temp-unit">C</div>
</div>
<p>Nothing else is wrong with this code <br> Gotta love those typos huh?</p>

Answer 2

在HTML（DIV）标记中，您必须使用“class”，而不是“className”：

.app-icon-temp {
    width: 115px;
    height: 115px;
    position:relative;
    background: #ddd;
}
.icon-temp-current {
    position:absolute;
    bottom:0;
    right:0;
    padding:10px;
}
.icon-temp-unit {
    position:absolute;
    top:0;
    right:0;
    padding:10px;
}

<div class='app-icon-temp'>
    <div class='icon-temp-current'>00.00</div>
    <div class='icon-temp-unit'>C</div>
</div>

Answer 3

当div进入页面时，它会占用整行。它就像那样的猪，类似于图像，但是如果你漂浮div，它将允许你按照自己喜欢的方式定位它。

你可以使用＆＃34; float：right;＆＃34;

在你的CSS中执行此操作

具有绝对定位的Div表现不一致

3 个答案: