HTML如何解決div來

頁面

enter image description here

我的CSS是：

td{ 
font-size: medium; 
font-family: Arial, Helvetica, sans-serif; 
color: #271D01; 
text-align: justify; 
line-height: 1.3em; 
font-weight: bold; 
font-variant: small-caps; 
min-width: 100px; 

}

而且我GSP：

... 
     <g:each var="it3" in="${program[it2.id]}"> 
           <td id="c1"> 
           <div id="c1_div"><u><g:formatDate format="HH:mm" date="${it3.prog_start}"/> - <g:formatDate format="HH:mm" date="${it3.prog_end}"/></u></div> 
           <div>&nbsp;</div> 
           <div>${it3.prog_title}</div> 

           </td> 
     </g:each> 
...

如何我可以在div中修正小時範圍，這樣無論it3.prog_title的大小如何，小時都會顯示在t他同樣的位置，也是從同一位置開始的標題。我期待通過-css來完成此操作。

來源

2011-11-16 recoInrelax

你想設置你的TDvertical-align: top的，然後只爲您div設置類的有margin-top或top風格得到你想要的div的間距。這也將擺脫你的spacer div並使用CSS來定位你想要的。當我在它的時候，也刪除了<u>標籤，並用CSS代替它。

CSS：

td { 
    font-size: medium; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #271D01; 
    text-align: justify; 
    line-height: 1.3em; 
    font-weight: bold; 
    font-variant: small-caps; 
    min-width: 100px; 
    vertical-align: top; 
} 
.time { 
    margin-top: 10px; 
    text-decoration: underline; 
} 
.title { 
    margin-top: 20px; 
}

GSP：

... 
     <g:each var="it3" in="${program[it2.id]}"> 
      <td id="c1"> 
      <div id="c1_div" class="time"><g:formatDate format="HH:mm" date="${it3.prog_start}"/> - <g:formatDate format="HH:mm" date="${it3.prog_end}"/></div> 
      <div class="title">${it3.prog_title}</div> 
      </td> 
     </g:each> 
...

來源

2011-11-16 15:53:58

你試過在表格單元格vertical-align？


td{ 
font-size: medium; 
font-family: Arial, Helvetica, sans-serif; 
color: #271D01; 
text-align: justify; 
line-height: 1.3em; 
font-weight: bold; 
font-variant: small-caps; 
min-width: 100px; 
vertical-align: top; 
}

來源

2011-11-16 15:53:27

你可以做一小時的範圍內相對定位的<td>

頂部

來源

2011-11-16 15:54:52 Alex

HTML如何解決div來

回答

相關問題