1. Accueil
  2. Question et réponse
  3. css page-break-after ne fonctionne pas

css page-break-after ne fonctionne pas

2016-12-22 6 views
0

J'essaie d'éviter les sauts de page pour plusieurs titres div (en utilisant drupal), mais page-break-after: éviter ne fait rien (mais page-break-before: toujours fait). n'est pas vide, donc ça devrait marcher. Un indice? Mon code html est:css page-break-after ne fonctionne pas

#DIV_1 { 
 
    height: 279px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 139.5px; 
 
    transform-origin: 437.5px 139.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
} 
 
/*#DIV_1*/ 
 

 
#DIV_2 { 
 
    height: 28px; 
 
    text-align: left; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 14px; 
 
    transform-origin: 437.5px 14px; 
 
    font: normal normal bold normal 24px/normal helvetica, arial; 
 
} 
 
/*#DIV_2*/ 
 

 
#DIV_3 { 
 
    height: 251px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 125.5px; 
 
    transform-origin: 437.5px 125.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
    margin: 0px 0px 10px; 
 
} 
 
/*#DIV_3*/ 
 

 
#DIV_4 { 
 
    height: 141px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 70.5px; 
 
    transform-origin: 437.5px 70.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
} 
 
/*#DIV_4*/ 
 

 
#DIV_5 { 
 
    break-after: avoid; 
 
    height: 23px; 
 
    text-align: left; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 11.5px; 
 
    transform-origin: 437.5px 11.5px; 
 
    font: italic normal normal normal 20.4px/normal helvetica, arial; 
 
    margin: 0px 0px 5px; 
 
} 
 
/*#DIV_5, #DIV_50*/ 
 

 
#DIV_6 { 
 
    height: 113px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 56.5px; 
 
    transform-origin: 437.5px 56.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
    margin: 0px 0px 10px; 
 
} 
 
/*#DIV_6*/ 
 

 
#TABLE_7 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 112px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 56.5px; 
 
    transform-origin: 437.5px 56.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
    margin: 0px 0px 15px; 
 
} 
 
/*#TABLE_7*/ 
 

 
#CAPTION_8 { 
 
    border-collapse: collapse; 
 
    height: 21px; 
 
    text-align: left; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 10.5px; 
 
    transform-origin: 437.5px 10.5px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 18px/normal helvetica, arial; 
 
} 
 
/*#CAPTION_8, #CAPTION_53*/ 
 

 
#THEAD_9 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 22px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 11px; 
 
    transform-origin: 437.5px 11px; 
 
    border: 0px none rgb(128, 128, 128); 
 
    border-spacing: 2px 2px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
} 
 
/*#THEAD_9, #THEAD_54*/ 
 

 
#TR_10 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 22px; 
 
    vertical-align: middle; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 11px; 
 
    transform-origin: 437.5px 11px; 
 
    background: rgba(0, 0, 0, 0) linear-gradient(rgb(218, 241, 255) 0%, rgb(175, 232, 255) 100%) repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(128, 128, 128); 
 
    border-spacing: 2px 2px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
} 
 
/*#TR_10, #TR_55*/ 
 

 
#TH_11 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 72px; 
 
    perspective-origin: 43px 11px; 
 
    transform-origin: 43px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_11, #TH_12, #TH_56*/ 
 

 
#TH_13 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 197px; 
 
    perspective-origin: 105.5px 11px; 
 
    transform-origin: 105.5px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_13, #TH_58*/ 
 

 
#TH_14 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 110px; 
 
    perspective-origin: 62px 11px; 
 
    transform-origin: 62px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_14, #TH_59*/ 
 

 
#TH_15 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 165px; 
 
    perspective-origin: 89.5px 11px; 
 
    transform-origin: 89.5px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_15, #TH_60*/ 
 

 
#TH_16 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 77px; 
 
    perspective-origin: 45.5px 11px; 
 
    transform-origin: 45.5px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_16, #TH_61*/ 
 

 
#TH_17 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 84px; 
 
    perspective-origin: 49px 11px; 
 
    transform-origin: 49px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_17, #TH_62*/
<div id="DIV_1"> 
 
    <div id="DIV_2"> 
 
    Anoia 
 
    </div> 
 
    <div id="DIV_3"> 
 
    <div id="DIV_4"> 
 
     <div id="DIV_5"> 
 
     Sant Martí de Tous 
 
     </div> 
 
     <div id="DIV_6"> 
 
     <table id="TABLE_7"> 
 
      <caption id="CAPTION_8"> 
 
      Can Aubareda 
 
      </caption> 
 
      <thead id="THEAD_9"> 
 
      <tr id="TR_10"> 
 
       <th id="TH_11"> 
 
       Data inici 
 
       </th> 
 
       <th id="TH_12"> 
 
       Data fi 
 
       </th> 
 
       <th id="TH_13"> 
 
       Entitat 
 
       </th> 
 
       <th id="TH_14"> 
 
       Municipi 
 
       </th> 
 
       <th id="TH_15"> 
 
       Contacte 
 
       </th> 
 
       <th id="TH_16"> 
 
       Telèfon 
 
       </th> 
 
       <th id="TH_17"> 
 
       Persones 
 
       </th> 
 
      </tr> 
 
      </thead> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2016-12-22 enboig

Répondre

0

changement div-span n'est pas acceptable pour votre cas?

Source

2016-12-22 15:37:12

+0

div est généré par le CMS, pas une tâche facile. Une solution juste css est plus facile à mettre en œuvre – enboig

0

essayez d'ajouter #DIV_2 {display: inline} mais il est toujours mieux vous utiliser l'élément HTML approprié, en cas de div remplacer pour span est une meilleure solution, car div est un block element.

Source

2016-12-22 15:56:18

+0

j'ai changé le modèle à – enboig

+0

j'ai changé le modèle, mais un saut de page se produit encore entre

– enboig

0

Utilisez display: inline; dans les deux #DIV_2, #DIV_3, #DIV_4, #DIV_5 pour faire Anoia Sant Martí de Tous dans la même ligne

pour obtenir Can Aubareda dans la même ligne utilisent le même pour #DIV_6, table, caption. mais je recommande l'habitude de vous parce que vous ne devriez pas faire un table à afficher comme inline

#DIV_1 { 
 
    height: 279px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 139.5px; 
 
    transform-origin: 437.5px 139.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
} 
 
/*#DIV_1*/ 
 

 
#DIV_2 { 
 
    display: inline; 
 
    height: 28px; 
 
    text-align: left; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 14px; 
 
    transform-origin: 437.5px 14px; 
 
    font: normal normal bold normal 24px/normal helvetica, arial; 
 
} 
 
/*#DIV_2*/ 
 

 
#DIV_3 { 
 
    display: inline; 
 
    height: 251px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 125.5px; 
 
    transform-origin: 437.5px 125.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
    margin: 0px 0px 10px; 
 
} 
 
/*#DIV_3*/ 
 

 
#DIV_4 { 
 
    display: inline; 
 
    height: 141px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 70.5px; 
 
    transform-origin: 437.5px 70.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
} 
 
/*#DIV_4*/ 
 

 
#DIV_5 { 
 
    display: inline; 
 
    break-after: avoid; 
 
    height: 23px; 
 
    text-align: left; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 11.5px; 
 
    transform-origin: 437.5px 11.5px; 
 
    font: italic normal normal normal 20.4px/normal helvetica, arial; 
 
    margin: 0px 0px 5px; 
 
} 
 
/*#DIV_5, #DIV_50*/ 
 

 
#DIV_6 { 
 
    height: 113px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 56.5px; 
 
    transform-origin: 437.5px 56.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
    margin: 0px 0px 10px; 
 
} 
 
/*#DIV_6*/ 
 

 
#TABLE_7 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 112px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 56.5px; 
 
    transform-origin: 437.5px 56.5px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
    margin: 0px 0px 15px; 
 
} 
 
/*#TABLE_7*/ 
 

 
#CAPTION_8 { 
 
    border-collapse: collapse; 
 
    height: 21px; 
 
    text-align: left; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 10.5px; 
 
    transform-origin: 437.5px 10.5px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 18px/normal helvetica, arial; 
 
} 
 
/*#CAPTION_8, #CAPTION_53*/ 
 

 
#THEAD_9 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 22px; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 11px; 
 
    transform-origin: 437.5px 11px; 
 
    border: 0px none rgb(128, 128, 128); 
 
    border-spacing: 2px 2px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
} 
 
/*#THEAD_9, #THEAD_54*/ 
 

 
#TR_10 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 22px; 
 
    vertical-align: middle; 
 
    width: 875px; 
 
    perspective-origin: 437.5px 11px; 
 
    transform-origin: 437.5px 11px; 
 
    background: rgba(0, 0, 0, 0) linear-gradient(rgb(218, 241, 255) 0%, rgb(175, 232, 255) 100%) repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(128, 128, 128); 
 
    border-spacing: 2px 2px; 
 
    font: normal normal normal normal 12px/normal helvetica, arial; 
 
} 
 
/*#TR_10, #TR_55*/ 
 

 
#TH_11 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 72px; 
 
    perspective-origin: 43px 11px; 
 
    transform-origin: 43px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_11, #TH_12, #TH_56*/ 
 

 
#TH_13 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 197px; 
 
    perspective-origin: 105.5px 11px; 
 
    transform-origin: 105.5px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_13, #TH_58*/ 
 

 
#TH_14 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 110px; 
 
    perspective-origin: 62px 11px; 
 
    transform-origin: 62px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_14, #TH_59*/ 
 

 
#TH_15 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 165px; 
 
    perspective-origin: 89.5px 11px; 
 
    transform-origin: 89.5px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_15, #TH_60*/ 
 

 
#TH_16 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 77px; 
 
    perspective-origin: 45.5px 11px; 
 
    transform-origin: 45.5px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_16, #TH_61*/ 
 

 
#TH_17 { 
 
    border-collapse: collapse; 
 
    break-inside: avoid; 
 
    height: 14px; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 84px; 
 
    perspective-origin: 49px 11px; 
 
    transform-origin: 49px 11px; 
 
    border-spacing: 2px 2px; 
 
    font: normal normal bold normal 12px/normal helvetica, arial; 
 
    padding: 4px 7px; 
 
} 
 
/*#TH_17, #TH_62*/
<div id="DIV_1"> 
 
    <div id="DIV_2"> 
 
    Anoia 
 
    </div> 
 
    <div id="DIV_3"> 
 
    <div id="DIV_4"> 
 
     <div id="DIV_5"> 
 
     Sant Martí de Tous 
 
     </div> 
 
     <div id="DIV_6"> 
 
     <table id="TABLE_7"> 
 
      <caption id="CAPTION_8"> 
 
      Can Aubareda 
 
      </caption> 
 
      <thead id="THEAD_9"> 
 
      <tr id="TR_10"> 
 
       <th id="TH_11"> 
 
       Data inici 
 
       </th> 
 
       <th id="TH_12"> 
 
       Data fi 
 
       </th> 
 
       <th id="TH_13"> 
 
       Entitat 
 
       </th> 
 
       <th id="TH_14"> 
 
       Municipi 
 
       </th> 
 
       <th id="TH_15"> 
 
       Contacte 
 
       </th> 
 
       <th id="TH_16"> 
 
       Telèfon 
 
       </th> 
 
       <th id="TH_17"> 
 
       Persones 
 
       </th> 
 
      </tr> 
 
      </thead> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2016-12-22 16:27:31 jafarbtech

+0

Utilisation de l'affichage: inline est pas une solution, il se joint à « une importance différente titres "dans le même linke – enboig

+0

Utilisation de l'affichage: inline n'est pas une solution, il rejoint" titres d'importance différente "dans la même ligne, je vais devoir modifier le modèle afin qu'il utilise comme vous le recommandez. Quels divs devrais-je changer en span? – enboig

+0

faire tous 'div's comme' span's entre lesquels les éléments doivent être dans la même ligne – jafarbtech

 Questions connexes

  • Aucun problème connexe^_^