当页面不是全宽时，响应式css日历格式会中断
我已经嘲笑了一个响应式日历。此日历用于显示当地消防部门的班次。
See this JS fiddle for an example
正如您所看到的那样，日历会重新调整尺寸，但保持其＆＃34;单元格的相同宽高比。当你改变小提琴的框架大小时。
只要将其放在html页面中的全宽容器内，我上面的解决方案就可以工作。
问题
只要我将日历放在不是页面宽度的html div中，日历就无法正确显示。单元格不是正方形，并且叠加的项目（x，O和方形）未正确定位。 这是因为我将每个单元格的高度基于视口宽度或 vw 。请参阅css＆＃34; .pCal ul li ＆＃34;和属性身高：14vw;
See this fiddle for an example of the problem.
以下图片捕获问题（您可以看到左侧和右侧的列以及中间显示的错误日历）
问题：
有人可以帮我纠正我的CSS，以便即使在不是页面的整个宽度的html元素内也能正确显示日历。
我真的更喜欢只有css解决方案，但如果需要可以使用javascript。
附加信息
为了完整性，我需要添加以下细节。此解决方案使用FOUNDATION 5.5前端框架。
这是我的HTML（如果小提琴不显示）：
<div class="row">
<div class="small-12 medium-2 columns" style="background:lightGrey;height:150px;">Left Column</div>
<div class="small-12 medium-8 columns">
<div class="row">
<div class="small-2 columns calPrev"><</div>
<div class="small-8 columns calMonth">March 2015</div>
<div class="small-2 columns calNext">></div>
</div>
<div class="row calRow">
<div class="small-12 columns pCal">
<ul class="small-block-grid-7">
<li class="calHead">
<span>SUN</span>
</li>
<li class="calHead">
<span>MON</span>
</li>
<li class="calHead">
<span>TEU</span>
</li>
<li class="calHead">
<span>WED</span>
</li>
<li class="calHead">
<span>THU</span>
</li>
<li class="calHead">
<span>FRI</span>
</li>
<li class="calHead">
<span>SAT</span>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftOr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-29.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftGr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-30.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftGr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-1.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftBl shift2" />
<dt class="shiftRd shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-2.svg">
</div>
<dl class="calDayOverlay">
<dt class="calLayer2 calX">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-special-X.svg">
</dt>
<dt class="calLayer3 calCircle">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-special-O.svg">
</dt>
<dt class="calLayer4 calSquare">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-special-SQR.svg">
</dt>
</dl>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftBl shift2" />
<dt class="shiftRd shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-3.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftOr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-4.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftOr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-5.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftOr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-6.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftOr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-7.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftBl shift3" />
<dt class="shiftWh shift3" />
<dt class="shiftRd shift3" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-8.svg">
</div>
<dl class="calDayOverlay">
<dt class="calLayer2 calX">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-special-X.svg">
</dt>
</dl>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftBl shift2" />
<dt class="shiftRd shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-9.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-10.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-11.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftGr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-12.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftGr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-13.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftBl shift2" />
<dt class="shiftRd shift2" />
</dl>
<div class="calDay">
<img class="calToday" src="http://www.krisis.ca/Portals/0/development/effu/cal-day-14.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftBl shift2" />
<dt class="shiftRd shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-15.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftOr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-16.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftOr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-17.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftOr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-18.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftOr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-19.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-20.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-21.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftGr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-22.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftGr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-23.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftBl shift2" />
<dt class="shiftRd shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-24.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftBl shift2" />
<dt class="shiftRd shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-25.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftOr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-26.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftOr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-27.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftOr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-28.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftOr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-29.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftOr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-30.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-31.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftGr shift2" />
<dt class="shiftBl shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-1.svg">
</div>
</li>
<li>
<dl class="calDayParts">
<dt class="shiftRd shift2" />
<dt class="shiftGr shift2" />
</dl>
<div class="calDay">
<img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-2.svg">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="small-12 medium-2 columns" style="background:lightGrey;height:150px;">Right Column</div>
</div>
这是我的CSS :(你需要包含对基础5 css的引用 - 你可以使用this CDN）
.calRow {
max-width:100%;
}
.calMonth, .calPrev, .calNext {
text-transform:uppercase;
font-weight:bold;
color:gray;
font-size:2em;
margin:15px 0;
}
.calMonth {
text-align:center;
}
.calPrev {
text-align:left;
}
.calNext {
text-align:right;
}
.pCal ul li {
text-align:center;
height:14vw;
padding:0;
border-left:solid 1px gray;
border-top:solid 1px gray;
}
.pCal ul li:after {
content:'';
display: block;
margin-top: 100%;
}
.pCal ul li dl {
position:relative;
padding:0;
margin:0;
top:0;
height:100%;
}
.pCal ul li dl dt {
padding:0;
margin:0;
}
.pCal ul li.calHead {
font-size:1.2em;
border:none;
color:gray;
height:25px;
margin-bottom:15px;
}
.calToday {
border-bottom:0.5em solid lightGrey;
}
.calDay {
position:relative;
padding:15%;
margin:0;
top:-100%;
}
.calLayer2, .calLayer3, .calLayer4 {
position:relative;
padding:0;
}
.calLayer2 {
top:-200%;
}
.calLayer3 {
top:-300%;
}
.calLayer4 {
top:-400%;
}
/* SHIFT HEIGHT / SIZE STYLES */
.shift2 {
height:50%
}
.shift3 {
height:33.33%
}
.shift4 {
height:25%
}
/* OVERLAY STYLES */
.calX img{
width:100%;
padding-top:2%;
}
.calCircle img{
width:100%;
padding:9% 7%;
}
.calSquare img {
width:100%;
padding:7%;
}
/* SHIFT COLOR STYLES */
.shiftYw {
background:yellow;
}
.shiftOr {
background:orange
}
.shiftBl {
background:blue
}
.shiftRd {
background:red
}
.shiftGr {
background:green
}
.shiftWt {
background:white
}
.shiftBk {
background:lightGray
}
先谢谢你的帮助！
1 个答案:
答案 0 :(得分：1)
因此，基本更改是跳过li元素的高度，并使用百分比填充。通过这样做，盒子将保持正方形。其余的只是内部元素的绝对定位。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？