Auf Canvas - Objekte mit Mausevents zugreifen

[Rolf B]

Hallo uwe,

vergiss Float.

Mein Vorschlag zielte auf absolute Positionierung hin, d.h. position:absolute an den Balken (wofür man dann das position:relative am Container braucht, damit sich die Koordinaten der Balken auf den Container beziehen).

Eine Alternative mit automatischer Positionierung ist nicht float. Statt dessen kannst Du auch die Flexbox nehmen. HTML bleibt gleich.

#fer0, #fer0a {
  display: flex;
  align-items: flex-end;
  /* löschen position: relative; */
  width: 350px;
  height: 200px;
  background-image: url(https://bizilliance.com/bilder/y0.jpg);
  background-repeat: no-repeat;
  opacity: 0.5;
}
.b1 {
  /* löschen float:left; */
  background-color:yellow;
  /* löschen width:20px;  */
  /* löschen bottom: 0; */
  /* löschen vertical-align:bottom; */
  flex: 1 0 10px;
  height: 100px;
  /* ändern */ margin: 0 5px;
}
.z {
  text-align: center;
  /* löschen!!! vertical-align: top; */
  font-size: 0.9;
}

Eine Flexbox ordnet ihre Kind-Elemente (die Flex-Items) entlang einer Hauptache an. Diese ist per Default horizontal (flex-direction:row).

Wie die Kind-Elemente quer zur Hauptachse platziert werden, bestimmt align-items. Es gibt flex-start, stretch, center, flex-end und mehr, siehe unser Wiki. Für "unten" brauchen wir flex-end.

An den Kind-Elementen gibt es die flex-Eigenschaft. Sie kombiniert flex-grow, flex-shrink und flex-basis. flex-grow:1 sagt: das Element darf sich verbreitern, wenn Platz ist. flex-shrink1: sagt: das Element darf sich verkleinern, wenn Platz fehlt. Und flex-basis ist die Breite, von der aus gegrowt und geshrinkt wird. Die Wahrheit ist noch etwas umfangreicher, guck ins Wiki.

Du kannst flex-grow auch auf 0 lassen, dann bleiben die Balken auf ihrer von Dir eingestellten Breite, und du behältst Leerraum. Den zu verteilen obliegt der Eigenschaft justify-content, die Du auf #fer0 setzen musst. Es gibt flex-start (Default), flex-end, center, space-between und space-around. Probier's mal aus (oder schau in unser Wiki).

Mit display:flex kann man auch Text in einer Box zentrieren. Weil ein Flex-Item selbst wieder eine Flexbox sein kann, könntest Du für die .b1 Element noch hinzufügen:

.b1 {
  ...
  display: flex;
	justify-content: center;
	align-items: center;
}

dann wird das p Element darin im div.b1 zentriert. Was nicht bei nackigem Text im div funktioniert, insofern ist dein p schon sinnvoll. Wobei, ich glaube, das p Element möchte lieber ein span oder div sein. <p> bringt zu viel eigene Styles für den Zweck mit. Und es braucht auch keine eigene Klasse. Du kannst es im Stylesheet mit dem Selektor .b1 p, bzw. .b1 span, ansprechen (siehe CSS Kombinatoren)

Wie schon gesagt: Du kannst dem Element mit dem Zahlenwert drin auch noch writing-mode:vertical-lr geben. Dann steht die Zahl senkrecht 😀.

Spielplatz: https://jsfiddle.net/Rolf_b/etwdv18c/

Rolf