1

不幸的是，我试图在 CSS 形状上对齐“日期”数字有点疯狂。我遇到的问题是，为了简单起见，我更喜欢“通用”CSS 数字格式（日期是一个显示变量，其中一个应用于 td 的类）。然后，我根据其状态更改底层单元格形状的 CSS 类以为其提供背景。所有的 PHP 都可以输出东西，但是一些数字与单元格的中心对齐，其他数字在单元格中太低（中间高度底部），其中两个在顶部的页面之外。

这就是我要做的（非常简化，但说明了表格中的对齐问题） - JSFiddle http://jsfiddle.net/xLWCH/

.daynumber  {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; font-weight: bold; position:absolute; display: table-cell; width:20px; vertical-align:middle; top:-9px; text-align: center; vertical-align: middle;}

.halfdaystart {position:relative; border-top: 20px solid green; border-right:20px solid red; font-size:0; line-height:0; width:0;}
.halfdayend   {position:relative; border-top: 20px solid red; border-right:20px solid green; font-size:0; line-height:0; width:0;}
.booked {width:20px; height:20px; background:red;}

.Prohalfdaystart {position:relative; border-top:20px solid green; border-right:20px solid yellow; font-size:0; line-height:0; width:0;}
.Prohalfdayend {position:relative; border-top: 20px solid yellow; border-right:20px solid green;font-size:0; line-height:0; width:0;}
.Profree {width:20px; height:20px; background:yellow;}

.SBhalfdaystart {position:relative; border-top:20px solid red; border-right:20px solid green; width:0; height:0;}
.SBhalfdaystart:before {content: ''; display:block; position:relative; background:lightblue; height:5px; width:20px; top:-20px;}

.SBhalfdayend {position:relative; border-top:20px solid green; border-right:20px solid red; width:0; height:0;}
.SBhalfdayend:before { content: ''; display:block; position:relative; background:lightblue; height:5px; width:20px; top:-20px;}

.free {position:relative; width:20px; height:20px; background:green;}

.SBfree {position:relative; border-top:20px solid green; border-right:20px solid green; width:0; height:0;}
.SBfree:before { content: ''; display:block; position:absolute; background:lightblue; height:5px; width:20px; top:-20px;}


<table width="20" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Halfdaystart
<div class='halfdaystart'> <!-- or other corresponding class above  -->
<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=center class="daynumber">1</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

做这个的最好方式是什么？是否可以使用适合所有 CSS 的一种尺寸来完成，或者我是否必须为文本创建一个单独的类（应用于 td）以及取决于我想要显示为控制形状的 div 类的内容？基本上有没有一种快速简便的方法来做到这一点？

4

0 回答 0