Wie schrumpfe ich ein div?

Question

Ich habe eine frustrierende Zeit mit HTML und CSS.

Grundsätzlich Ich versuche, eine Website mit einem Layout wie

Problem zu machen, ist, die div auf der linken Seite hat einen massiven Rand, der die Leinwand verdrängt und macht passieren.

Ich habe alle Arten von Lösungen, von denen hier versucht, einige sind, die Probleme, die sie verursacht:

Einstellung der divs Anzeige Inline-Block. Dadurch wurde das Div aus irgendeinem Grund vollständig entfernt und der Inhalt rechts von der Leinwand angezeigt. (Zumindest hat es die Leinwand nach oben bewegt). Ich muss darauf hinweisen, dass der Inhalt nicht wirklich sichtbar war. Ctrl + Shift + Ich sagte, sie waren da ".

Ändern der div zu einer Inline-Komponente (span). Machte keinen Unterschied.

Ich versuchte margin: 0px;. Daran hat es nichts geändert. margin-left and margin-right zu auto zentrierte nur das div und bewegte die Leinwand nicht.

Ich habe versucht, manuelle width/height Werte für die div. Kein Unterschied.

Es gibt einige Lösungen, die wahrscheinlich funktionieren werden, aber ich zögere, sie auszuprobieren.

Ich könnte einen Tisch machen und die Elemente hinzufügen, aber ich habe gehört, das ist schlechte Praxis und möchte es vermeiden.

Ich könnte die Positionen manuell einstellen, aber ich befürchte, dass sie sich über Geräte und Auflösungen ändern können.

Ich bin bei ein bisschen Verlust, was zu tun ist. Ich bin ein Anfänger bei HTML und Layout im Allgemeinen, also bitte entschuldigen Sie, wenn es etwas wirklich Offensichtliches ist, das ich vermisse.

Danke für jede Hilfe.

Answer 1

Es ist nicht wirklich "Schrumpfung" Sie sind danach. Aber da ich nicht weiß, wie du deine Divs und Canvas nennst, gebe ich dir die allgemeine Lösung. ->https://www.w3schools.com/css/css_float.asp diese So versuchen im Grunde fügt hinzu:

div, canvas { 
    float: left; 
} 

Ihre div und Leinwand Unter der Annahme ist eine <div></div> und <canvas></canvas>, und dass Sie eine position: fixed; oder position: absolute; zu einem von ihnen nicht hinzugefügt haben.