絕對定位的Div表現行爲不一致

我對事物的前端有點新，所以如果我忽略了一些簡單的東西，請原諒我。絕對定位的Div表現行爲不一致

這是一個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位置。我需要將此項目移至右上角。

是什麼導致了這種不一致？

來源

2017-05-08 Joe Edwards

APP-icon-臨時類缺少您的CSS中的點 – Daniel

似乎對我來說很有用... https://codepen.io/anon/pen/gWoLJx –

@D aniel你是對的，謝謝你指出。它從SO問題中遺漏，但不是我正在運行的代碼 –

-3

當div進入頁面時，它佔用整行。這是一個像這樣的豬，類似於圖像，但是如果您浮動div，它將允許您按照自己的喜好定位它。

你可以在你的css中用「float：right;」

來源

2017-05-08 18:36:13 Neodreadlord

Div可以是任何東西，你的聲明是關閉的。此外，漂浮物是可怕的，如果沒有正確使用，它們會造成更多的傷害。 – Ravenous

在沒有任何幫助的情況下，相對div橫跨頁面（父），絕對div會摺疊到其內容。浮動div行爲像絕對的一樣崩潰，但它們不一樣。 – Daniel

更改應用圖標-TEMP名爲.app到圖標-TEMP 和類名

類

如果有任何錯誤仍然存在，能否請您正確的代碼複製到這個問題？

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

來源

2017-05-08 18:51:45

此錯誤僅在我的問題中，而不是原始代碼。在開發人員控制檯進行仔細檢查後，由於某種原因，該類未應用於第二個div。 –

在HTML（DIV）標籤，你必須使用「類」，而不是「類名」：

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

來源

2017-05-08 18:53:03 Johannes

我明白了。我在最初的問題中添加了一個編輯，說明它是一個React應用程序。在React中，這是將類名應用於呈現的HTML元素的方法。 –

啊，我不知道。那麼它應該工作，正如你可以在我的代碼片段中看到的那樣 – Johannes

絕對定位的Div表現行爲不一致

回答

相關問題