文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >css分页后不起作用

问css分页后不起作用
EN

Stack Overflow用户
提问于 2016-12-22 23:33:42
回答 3查看 503关注 0票数 2

我尝试为多个div标题避免分页(使用drupal)，但是page- break -after:avoid什么也不做(除了page -break- but :always做)。不是空的，所以它应该可以工作。有什么提示吗？我的代码html是：

​

代码语言：javascript
复制
#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*/
代码语言：javascript
复制
<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>

​

css
page-break
EN

回答 3

Stack Overflow用户

发布于 2016-12-22 23:37:13

将div更改为span对您的情况是不可接受的吗？

票数 0
EN

Stack Overflow用户

发布于 2016-12-22 23:56:19

尝试添加#DIV_2 {display: inline}，但最好使用适当的html元素，在div的情况下，将其替换为span是更好的解决方案，因为div是一个block element。

票数 -1
EN

Stack Overflow用户

发布于 2016-12-23 00:27:31

在#DIV_2、#DIV_3、#DIV_4、#DIV_5中使用display: inline;，使Anoia Sant Martí de Tous在同一行中

要将Can Aubareda放在同一行中，请对#DIV_6、table、caption使用相同的方法。，但我不建议您使用，因为您不应该将table显示为inline

​

代码语言：javascript
复制
#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*/
代码语言：javascript
复制
<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>

​

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41286656

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档