问题
Hello my stackflow timesaving problem solving buddies,
I'm using css to style a page that is being pushed out into a PDFand contains a set of boxes ready for teams to print out.
However, some boxes are in-between pages and being cut in two.
I found the folowing...
http://www.w3schools.com/Css/pr_print_pageba.asp
...which is not working for me on auto, the other values are not appropriate.
The page is spitting out divs whict are float:left with content inside the div
layout:
[div] [div] [div]
[div] [div] [div]
[div] [div] [div] < Last div is spilling onto two pages
each div had a page-break-before:auto but the divs still are splitting onto 2 pages at times.
Why is this not working for me?
can you help?
回答1:
To get the desired behavior you might have to add the attributes:
div * { page-break-before:avoid; page-break-after:avoid; }
in order to avoid page breaking between all of the elements inside your divs
回答2:
Try page-break-inside:avoid. I believe page-break-after:avoid; and page-break-before:avoid are unimplemented. See: https://developer.mozilla.org/en/CSS/page-break-before
回答3:
I managed to get this working by applying
page-break-after:always;page-break-before:always;
However... i feel mVChr's solution would work also for other, but not in my case.
Many thanks
回答4:
Make sure the containing <div> is not inline-block. It seems like displaying your div as inline-block may prevent the page-break-auto: auto from working.
来源：https://stackoverflow.com/questions/4760899/page-break-beforeauto-not-working-for-me-why