html comment fixer un div à une page

Question

J'ai quelque chose comme ceci:

Mon css est:

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; 

} 

Et mon 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> 
... 

Comment Puis-je fixer la plage horaire dans la div, de sorte que peu importe la taille que 'it3.prog_title' prend, l'heure s'affichera toujours la même position, et aussi le titre commençant dans la même position. Je m'attends à faire ça via-css.

Answer 1

Vous voulez mettre vertical-align: top sur vos TD « s, puis seulement des cours d'installation pour vos div » s avoir un margin-top ou top de style pour obtenir l'espacement souhaité entre div « s. Cela permettrait également de se débarrasser de votre div intercalaire et utiliser CSS pour le positionner comme vous le souhaitez. Et pendant que j'y suis, j'ai également supprimé la balise <u> et l'ai remplacée par 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> 
... 

Answer 2

Avez-vous essayé vertical-align sur la cellule de table?

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; 
} 

Answer 3

Vous pourriez faire l'heure portée relativement positionnée au sommet de la <td>