因此,我正在为网站制作每日计划视图,但我无法格式化它.这是我下面的代码:
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); 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); 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,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,$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>
所以在演示中,我想要的是被黑客攻击的结果(div表的最后两行).
我正在使用bootstrap 3.3.4和附加的CSS来设置页面样式.我不知道为什么我不能让标题div按百分比(10%,90%)正确排列,但是下面的div不希望在下面匹配.
在黑客攻击的结果中,我刚刚添加了另一个类,appts,并将其膨胀到900%,它接近我想要的.但我希望这样做得恰到好处,并理解为什么这不符合我的希望.
我想要的是所有时间都是可用宽度的10%,然后appts占据可用宽度的90%.如果有多个.appt,则它们均匀地划分90%的宽度.
解决方法
这个怎么样:
.responsive-calendar .controls { color: #666; font-weight: normal; font-size: 18px; font-family: "Open Sans",sans-serif; text-align: left; } .responsive-calendar .controls a { cursor: pointer; } .responsive-calendar .day-headers,.responsive-calendar .timeslots { font-size: 0; } .responsive-calendar .header { background-color: #f3f2f2 !important; Box-shadow: 0px 1px 0px 0px rgb(255,255) inset; color: rgb(102,102); font-size: 13px; line-height: 18px; padding: 10px 0px; font-weight: bold; cursor: default !important; } .responsive-calendar .hour { font-size: 10px; border: 1px solid rgb(221,221); width: 10%; text-align: center; max-width: 10%; float: left; } .responsive-calendar .appts { height: auto; display: flex; } .responsive-calendar .appt { background-color: #CCC; font-size: 10px; border: 1px solid rgb(221,221); text-align: center; } .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); text-align: center; flex: 1 1 100%; -webkit-flex: 1 1 100%; } .responsive-calendar .timesection:hover { background-color: rgb(227,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 { text-decoration: none; } .responsive-calendar .timesection.header { border-bottom: 1px gray solid; } .responsive-calendar .timesection.active { background-color: rgb(209,224); } .responsive-calendar .timesection.active:hover { background-color: rgb(227,253); } .responsive-calendar .timesection.not-current { background-color: rgb(205,205); cursor: default; } .appt { max-width: 100%; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <div class="responsive-calendar"> <div class="controls"> <img src="images/left_16.png" /> <?PHP echo date( "M d,$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="appts"> <div class="timesection appt">Test 1</div> </div> </div> <div class="timeslot"> <div class="timesection hour">11:00am</div> <div class="appts"> <div class="timesection appt ">Test 2</div> <div class="timesection appt ">Test 3</div> </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>
我做了什么:
HTML:
>用div.appts包装.timesection .appt的元素.
CSS:
>完全删除.responsive-calendar .timeslot css.
>删除显示:inline-block;,position:relative;并添加了float:left;到.responsive-calendar.小时.
>删除显示:-webkit-flex;,width:900%;,flex-flow:row column;,– webkit-flex-flow:row column;来自.responsive-calendar .appts.
>从.responsive-calendar .appt中删除了flex,width,position和display.
>最后添加.appt最大宽度:100%;
还找到了example pen.