html – 无法获得%宽度来处理div表
因此,我正在为网站制作每日计划视图,但我无法格式化它.这是我下面的代码:
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> 这是一个JSFiddle demo. 所以在演示中,我想要的是被黑客攻击的结果(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. 还找到了example pen. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |