Html Boxen flexibel 
Autor: Klaus G.Hallöle Gemeine / KolAsim,
ich habe auf einer Webseite HTML-Boxen, die Terminbelegungen anzeigen.
Jetzt sollten diese HTML-Boxen Flexibel sein. So könnte ich 4 Boxen nebeneinander setzen, wegen Responsiven Umbruch.
Wie kann ich das bewerkstelligen ????
Hier der HTML Code:
<div class="calendar">
<div class="calendar__picture">
<h3>Januar</h3>
</div>
<div class="calendar__date">
<div class="calendar__day">Mo</div>
<div class="calendar__day">Di</div>
<div class="calendar__day">Mi</div>
<div class="calendar__day">Do</div>
<div class="calendar__day">Fr</div>
<div class="calendar__day">Sa</div>
<div class="calendar__day">So</div>
<div class="calendar__number"></div>
<div class="calendar__number"></div>
<div class="calendar__number"></div>
<div class="calendar__number">1</div>
<div class="calendar__number">2</div>
<div class="calendar__number">3</div>
<div class="calendar__number">4</div>
<div class="calendar__number">5</div>
<div class="calendar__number">6</div>
<div class="calendar__number">7</div>
<div class="calendar__number">8</div>
<div class="calendar__number">9</div>
<div class="calendar__number">10</div>
<div class="calendar__number">11</div>
<div class="calendar__number">12</div>
<div class="calendar__number">13</div>
<div class="calendar__number">14</div>
<div class="calendar__number">15</div>
<div class="calendar__number">16</div>
<div class="calendar__number">17</div>
<div class="calendar__number">18</div>
<div class="calendar__number">19</div>
<div class="calendar__number">20</div>
<div class="calendar__number">21</div>
<div class="calendar__number">22</div>
<div class="calendar__number">23</div>
<div class="calendar__number">24</div>
<div class="calendar__number">25</div>
<div class="calendar__number">26</div>
<div class="calendar__number">27</div>
<div class="calendar__number">28</div>
<div class="calendar__number">29</div>
<div class="calendar__number calendar__number--current">30</div>
</div>
</div>
Und hier der CSS-Code:
.calendar { position: relative; width: 300px; background-color: #fff; box-sizing: border-box; box-shadow: 0 5px 50px rgba(0, 0, 0, 0.5); border-radius: 8px; overflow: hidden;} .calendar__picture { position: relative; height: 200px; padding: 20px; color: #fff; background: #262626 url("https://images.unsplash.com/photo-1516912481808-3406841bd33c?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=183f2924ba5a8429441804609b2d4f61") no-repeat center / cover; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box;} .calendar__picture::before { content: ""; left: 0; right: 0; top: 0; bottom: 0; position: absolute; background: linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1));} .calendar__picture h2 { margin: 0;} .calendar__picture h3 { margin: 0; font-weight: 500;} .calendar__date { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)); grid-gap: 10px; box-sizing: border-box;} .calendar__day { display: flex; align-items: center; justify-content: center; height: 25px; font-weight: 600; color: #262626;} .calendar__day:nth-child(7) { color: #ff685d;} .calendar__number { display: flex; align-items: center; justify-content: center; height: 25px; color: #262626;} .calendar__number:nth-child(7n) { color: #ff685d; font-weight: 24px;}.calendar__number--current, & .calendar__number:hover { background-color: #009688; color: #fff !important; font-weight: 700; cursor: pointer;}

... Entfernen Sie Folgendes aus Ihrem CSS-Code: overflow: hidden
… oder verwenden Sie diesen Code:
<style>
@media (max-width: 1149.9px) {
.imHTMLObject{overflow:scroll !important}}
</style>
... ... oder es wäre besser, die Zellen mit dem Trennsteg zu trennen, sodass sie sich paarweise in einer Reihe anordnen...
.
ciao
.
Autor
Habe für mein Problem eine ander akzeptable Lösung gefunden.
Mal schauen, vieleicht finde ich mal eine besser lösung.


Danke für eure Hilfe
Gruß
KLAUS
Link
<style>@media (max-width: 1919.9px) and (min-width: 1616px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22, #imCellStyleGraphics_23, #imCellStyleGraphics_24, #imCellStyleGraphics_25 #imCellStyleGraphics_26, #imCellStyleGraphics_27, #imCellStyleGraphics_28, #imCellStyleGraphics_29, #imCellStyleGraphics_30, #imCellStyleGraphics_31, #imCellStyleGraphics_32, #imHTMLObject_21, #imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:50px; padding-right:50px}</style>
<style>@media (max-width: 1348.9px) and (min-width: 1150px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22, #imCellStyleGraphics_23, #imCellStyleGraphics_24, #imCellStyleGraphics_25 #imCellStyleGraphics_26, #imCellStyleGraphics_27, #imCellStyleGraphics_28, #imCellStyleGraphics_29, #imCellStyleGraphics_30, #imCellStyleGraphics_31, #imCellStyleGraphics_32, #imHTMLObject_21, #imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:130px; padding-right:130px}</style>
<style>@media (max-width: 1149.9px) and (min-width: 960px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22,#imCellStyleGraphics_22,#imCellStyleGraphics_23,#imCellStyleGraphics_24,#imCellStyleGraphics_25 #imCellStyleGraphics_26,#imCellStyleGraphics_27,#imCellStyleGraphics_28,#imCellStyleGraphics_29,#imCellStyleGraphics_30,#imCellStyleGraphics_31, #imHTMLObject_21,#imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:80px; padding-right:80px;}</style>
<style>@media (max-width: 959.9px) and (min-width: 720px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22,#imCellStyleGraphics_22,#imCellStyleGraphics_23,#imCellStyleGraphics_24,#imCellStyleGraphics_25 #imCellStyleGraphics_26,#imCellStyleGraphics_27,#imCellStyleGraphics_28,#imCellStyleGraphics_29,#imCellStyleGraphics_30,#imCellStyleGraphics_31, #imHTMLObject_21,#imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:30px; padding-right:30px}</style>
<style>@media (max-width: 719.9px) and (min-width: 480px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22,#imCellStyleGraphics_22,#imCellStyleGraphics_23,#imCellStyleGraphics_24,#imCellStyleGraphics_25 #imCellStyleGraphics_26,#imCellStyleGraphics_27,#imCellStyleGraphics_28,#imCellStyleGraphics_29,#imCellStyleGraphics_30, #imCellStyleGraphics_31,#imHTMLObject_21,#imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:80px; padding-right:80px}</style>
<style>@media (max-width: 479.9px) and (min-width: 360px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22,#imCellStyleGraphics_22,#imCellStyleGraphics_23,#imCellStyleGraphics_24,#imCellStyleGraphics_25 #imCellStyleGraphics_26,#imCellStyleGraphics_27,#imCellStyleGraphics_28,#imCellStyleGraphics_29,#imCellStyleGraphics_30,#imCellStyleGraphics_31,#imHTMLObject_21,#imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:20px; padding-right:20px}</style>
<style>#imCellStyleGraphics_21, #imCellStyleGraphics_22, #imCellStyleGraphics_23, #imCellStyleGraphics_24, #imCellStyleGraphics_25, #imCellStyleGraphics_26, #imCellStyleGraphics_27, #imCellStyleGraphics_28, #imCellStyleGraphics_29, #imCellStyleGraphics_30, #imCellStyleGraphics_31, #imCellStyleGraphics_32
{grid-row: 1 / -1; grid-column: 1 / -1;
background-color: #fcfdfe;
box-shadow: 5px 5px 10px #888888;
}</style>
...alles ist möglich, aber der Link ist zur Überprüfung nicht mehr erreichbar...
Hallo, ciao
.
Autor
Hier der Link:
https://www.italo-boys-kempten.de/Giusy_Test-Seite_mit_Kalender/Kalender/
Ich würde gerne das alle Boxen in jeder Auflösung die selbe Größe haben.
Wie ist das Machbar ????
Und nicht so
... Sie können möglicherweise mit den Zellenstiloptionen arbeiten ...
... Ohnehin, Probieren Sie es damit aus und ordnen Sie es dann so an, wie Sie möchten:
<style>
div[id^='imCellStyleGraphics_'] {background-color:transparent !important}
.calendar{background-color:lavender;width:280px !important}
</style>
.
ciao
.
Autor
Hallo KolAsim,
ich habe eine Lösung gefunden


<style>@media (max-width: 1348.9px) and (min-width: 1150px) {#imCellStyleGraphics_34, #imCellStyleGraphics_35, #imCellStyleGraphics_36, #imCellStyleGraphics_37, #imCellStyleGraphics_38, #imCellStyleGraphics_39, #imCellStyleGraphics_40, #imCellStyleGraphics_41, #imCellStyleGraphics_42, #imCellStyleGraphics_43, #imCellStyleGraphics_44, #imCellStyleGraphics_45, #imHTMLObject_34, #imHTMLObject_35, #imHTMLObject_36, #imHTMLObject_37, #imHTMLObject_38, #imHTMLObject_39, #imHTMLObject_40, #imHTMLObject_41, #imHTMLObject_42, #imHTMLObject_43, #imHTMLObject_44, #imHTMLObject_45 {padding-left:125px; padding-right:125px; margin-left: 100px; margin-right: 90px;}</style>
Mit margin-left und margin-right kann man es richten.


Du hast mich dazu gebracht meine eigen KI zu füttern.
So schaut es wesentlich besser aus.
Schönes Wochenend
Gruß
Klaus
... ... OK ... ciao
.