So mache ich eine tägliche Planer-Ansicht für eine Website und ich habe Schwierigkeiten, sie zu formatieren. Hier ist der Code, den ich unten haben:% widths können nicht auf einer div-Tabelle arbeiten
CSS
.responsive-calendar .controls {
color: #666;
font-weight: normal;
font-size: 18px;
font-family: "Open Sans",Arial,Verdana,sans-serif;
text-align: left;
}
.responsive-calendar .controls a {
cursor: pointer;
}
.responsive-calendar .controls h4 {
display: inline;
}
.responsive-calendar .day-headers, .responsive-calendar .days, .responsive-calendar .timeslots {
font-size: 0;
}
.responsive-calendar .header {
background-color: #f3f2f2 !important;
box-shadow: 0px 1px 0px 0px rgb(255, 255, 255) inset;
color: rgb(102, 102, 102);
font-size: 13px;
line-height: 18px;
padding: 10px 0px;
font-weight: bold;
cursor:default !important;
}
/* Daily Planner CSS */
.responsive-calendar .timeslot {
height:auto;
display:flex;
display:-webkit-flex;
flex-flow: row column;
-webkit-flex-flow: row column;
}
.responsive-calendar .hour {
display: inline-block;
position: relative;
font-size: 10px;
border:1px solid rgb(221, 221, 221);
width: 10%;
text-align: center;
flex: 1 1 100%;
-webkit-flex:1 1 100%;
}
.responsive-calendar .appts {
height:auto;
display:flex;
display:-webkit-flex;
width: 900%;
flex-flow: row column;
-webkit-flex-flow: row column;
}
.responsive-calendar .appt {
background-color:#CCC;
display: inline-block;
position: relative;
font-size: 10px;
border:1px solid rgb(221, 221, 221);
width: 90%;
text-align: center;
flex: 1 1 100%;
-webkit-flex:1 1 100%;
}
.responsive-calendar .appt a {
color: #000000;
display: block;
cursor: pointer;
padding: 5% 0 5% 0;
}
.responsive-calendar .timesection {
display: inline-block;
position: relative;
font-size: 10px;
border:1px solid rgb(221, 221, 221);
text-align: center;
flex: 1 1 100%;
-webkit-flex:1 1 100%;
}
.responsive-calendar .timesection:hover {
background-color: rgb(227, 235, 253);
cursor: pointer;
text-decoration: none;
}
.responsive-calendar .timesection a {
color: #000000;
display: block;
cursor: pointer;
padding: 3% 0 3% 0;
}
.responsive-calendar .timesection a:hover {
/* background-color: #eee; */
text-decoration: none;
}
.responsive-calendar .timesection.header {
border-bottom: 1px gray solid;
}
.responsive-calendar .timesection.active {
background-color: rgb(209, 206, 224);
}
.responsive-calendar .timesection.active:hover {
background-color: rgb(227, 235, 253);
}
.responsive-calendar .timesection.not-current {
background-color: rgb(205, 205, 205);
cursor:default;
}
HTML
<div class="responsive-calendar">
<div class="controls">
<img src="images/left_16.png" />
<?php echo date("M d, Y", mktime(0,0,0,$cMonth,$cDay,$cYear)); ?>
<img src="images/right_16.png" />
<a style="padding-left:15px;">Today</a>
<a style="padding-left:15px;">Monthly View</a>
</div>
<div class="day-headers">
<div class="hour header"><strong>Times</strong></div>
<div class="appt header"><strong>Appointments</strong></div>
</div>
<div class="timeslots">
<div class="timeslot">
<div class="timesection hour">10:00am</div>
<div class="timesection appt">Test 1</div>
</div>
<div class="timeslot">
<div class="timesection hour">11:00am</div>
<div class="timesection appt">Test 2</div>
<div class="timesection appt">Test 3</div>
</div>
<div class="timeslot">
<div class="timesection hour">12:00pm</div>
<div class="appts">
<div class="timesection appt">Hack Result 1</div>
</div>
</div>
<div class="timeslot">
<div class="timesection hour">12:00pm</div>
<div class="appts">
<div class="timesection appt">Hack Result 2</div>
<div class="timesection appt">Hack Result 3</div>
</div>
</div>
</div>
</div>
hier ein JSFiddle demo ist.
Also in der Demo, was ich will, ist das gehackte Ergebnis (die letzten 2 Zeilen von div Tabelle).
Ich benutze Bootstrap 3.3.4 und die beigefügten CSS, um die Seite zu stylen. Ich bin mir nicht sicher, warum ich die Header-Divs nicht richtig durch die Prozentsätze anordnen kann (10%, 90%), aber dann wollen die divs unten nicht übereinstimmen.
In das gehackte Ergebnis, ich habe gerade eine andere Klasse hinzugefügt, appts, und aufgeblasen, dass zu 900% und es wird nah das was ich wollte. Aber ich möchte, dass dies richtig gemacht wird und ich verstehe, warum das nicht so funktioniert, wie ich es mir erhofft habe.
Was ich will, ist all die Zeiten zu 10% der verfügbaren Breite, und dann die Appts zu 90% der verfügbaren Breite zu besetzen. Wenn es mehr als eine .appt gibt, teilen sie die 90% Breite gleichmäßig.
Nur aus Interesse, gibt es einen Grund, warum Sie nicht eine tatsächliche 'Tabelle' für diese Information verwenden (es handelt sich um Tabellendaten)? –
@HiddenHobbes - Ich will das auf Handys gut aussehen und gut skalieren. Ich habe dies mit einem Tisch gemacht und es skaliert einfach nicht richtig, oder zumindest konnte ich es nicht gut skalieren lassen. –
@DavidAvellan Dies zu tun, um auf mobile und Skalierung richtig zu arbeiten sollte eigentlich * einfacher * mit Tabellen als mit Divs, IMO sein. –