Divs mit absoluter Positionierung verhält sich inkonsistent

Ich bin ein bisschen neu an der Front-End-Seite der Dinge, also vergib mir, wenn ich etwas Einfaches übersehe.Divs mit absoluter Positionierung verhält sich inkonsistent

Dies ist eine React-Anwendung, die ich erstellen werde, die mehrere Symbole auf einem Bildschirm haben wird. Man liest aktuelle Temperatur von einem Sensor. Ich möchte die Einheit (C oder F) in der oberen rechten Ecke und die Sensoranzeige in der unteren rechten Ecke anzeigen.

Mein HTML-Code:

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

Mein CSS-Code:

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

Die ersten div Positionen wie in der rechten unteren Ecke erwartet, aber die zweiten div Positionen in den oberen linken. Ich muss diesen Gegenstand nach rechts oben verschieben.

Was verursacht diese Inkonsistenz?

Quelle

2017-05-08 Joe Edwards

app-icon- Temp-Klasse fehlt der Punkt in Ihrem CSS – Daniel

scheint wie es für mich funktioniert ... https://codepen.io/anon/pen/gWoLJx –

@D Aniel, du hast recht, danke, dass du das herausgebracht hast. Es fehlte an der SO-Frage, aber nicht an dem Code, den ich betreibe –

-3

Wenn ein Div auf eine Seite geht, nimmt es eine ganze Zeile ein. Es ist ein Schwein wie das, ähnlich einem Bild, aber wenn Sie das Div schweben, können Sie es so positionieren, wie Sie möchten.

können Sie dies in Ihrem CSS mit "float: right;"

Quelle

2017-05-08 18:36:13 Neodreadlord

Divs können alles sein, Ihre Aussage ist aus. Darüber hinaus sind Schwimmer schlecht, sie schaden mehr als nützen, wenn sie nicht richtig eingesetzt werden. – Ravenous

Ohne Hilfe überspannt ein relativer div die Seite (Eltern), ein absoluter div kollabiert auf seinen Inhalt. Das Floating-Div-Verhalten kollabiert wie und absolut, aber sie sind nicht gleich. – Daniel

Änderung app-icon-temp .app-icon-Temp und Klassenname der Klasse

Wenn ein Fehler auftritt, noch können Sie bitte den richtigen Code in die Frage kopieren?

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

Quelle

2017-05-08 18:51:45

Dieser Fehler war nur in meiner Frage und nicht im ursprünglichen Code.Nach näherer Betrachtung in der Entwicklerkonsole wird die Klasse aus irgendeinem Grund nicht auf das zweite div angewendet. –

Im HTML (DIV) -Tags, müssen Sie "Klasse" verwenden, nicht "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>

Quelle

2017-05-08 18:53:03 Johannes

Ich verstehe. Ich fügte der ersten Frage eine Änderung hinzu und erklärte, dass es sich um eine React-Anwendung handelt. In React ist dies die Methode, mit der Sie Klassennamen auf gerenderte HTML-Elemente anwenden. –

AH, das wusste ich nicht. dann sollte es funktionieren, wie du in meinem schnipsel sehen kannst – Johannes

Divs mit absoluter Positionierung verhält sich inkonsistent

Antwort

Verwandte Themen