html - Two-column div contained within individual printed pages -


sorry if has been asked before, here goes:

i'm creating reports using html , css, though pdf'ed. report needs contain two-column layout on pages, i'm using:

<div class="two_columns">   <p>lots , lots of text...</p>   <p>and multiple paragraphs...</p> </div>

with

div.two_columns {     -webkit-column-count: 2; /* chrome, safari, opera */     -moz-column-count: 2; /* firefox */     column-count: 2; }

however, report section long enough span multiple pages, left column continues onto second page , goes until half text in div displayed, wraps right column on first page. want left column wrap right column on first page until first page filled text, , wrap left column on second page (and display same amount of text in each of 2 columns on second page). there way this? not want have create separate divs individual columns or pages, because length of these different sections depends on features of data, different each unit being reported on.

first, have specify height of div. can use column-fill: auto;.

.balanced {    border: 1px solid #c1c1c1;    -webkit-columns: 3;    -moz-columns: 3;    columns: 3;    -webkit-column-fill: balanced;    -moz-column-fill: balanced;    column-fill: balanced;  }    .unbalanced {    border: 1px solid #c1c1c1;    height: 500px;    -webkit-columns: 3;    -moz-columns: 3;    columns: 3;    -webkit-column-fill: auto;    -moz-column-fill: auto;    column-fill: auto;  }
<h2>balanced</h2>  <div class="balanced"><p>lorem ipsum dolor sit amet, ne inani nullam cum. et tale facilisi mel, tation graeci facilisi ne nec, vix voluptaria mnesarchum repudiandae te. mutat minim virtute ei sea, augue atomorum explicari cu. @ mea mucius suscipiantur, vix no alia aliquando. pro et regione laboramus, ridens deterruisset sit te.</p>    <p>sit ea elit bonorum iracundia, mucius luptatum has et. te modus labores conclusionemque, eu ius salutandi efficiendi, usu alia commune. vero menandri vis eu, exerci complectitur id has. commune abhorreant liberavisse cum an. nam eu nibh utinam audire, ius in dico aliquid partiendo, sed delicata assentior ei.</p>    <p>has ludus nemore cu, liber scaevola instructior mel ei. copiosae pertinacia vix ne, duo eu prima nostrum, nec eu autem posse facilisi. impetus invidunt elaboraret ad eos. tale argumentum te quo.</p>    <p>eu ullum option definitionem pro, est erat novum ornatus ea, utinam deleniti vim no. nec adipisci maluisset in, ex solum labores iudicabit sit. et quo fabulas admodum petentium. ea postulant iracundia contentiones quo. ea est oratio altera.</p>    <p>eam esse adhuc theophrastus et. sit ei duis fierent, cum ex eius iriure fabulas. nec albucius deserunt no. vix albucius placerat reprimique in, est ei erat nusquam referrentur.</p></div>    <h2>unbalanced</h2>  <div class="unbalanced"><p>lorem ipsum dolor sit amet, ne inani nullam cum. et tale facilisi mel, tation graeci facilisi ne nec, vix voluptaria mnesarchum repudiandae te. mutat minim virtute ei sea, augue atomorum explicari cu. @ mea mucius suscipiantur, vix no alia aliquando. pro et regione laboramus, ridens deterruisset sit te.</p>    <p>sit ea elit bonorum iracundia, mucius luptatum has et. te modus labores conclusionemque, eu ius salutandi efficiendi, usu alia commune. vero menandri vis eu, exerci complectitur id has. commune abhorreant liberavisse cum an. nam eu nibh utinam audire, ius in dico aliquid partiendo, sed delicata assentior ei.</p>    <p>has ludus nemore cu, liber scaevola instructior mel ei. copiosae pertinacia vix ne, duo eu prima nostrum, nec eu autem posse facilisi. impetus invidunt elaboraret ad eos. tale argumentum te quo.</p>    <p>eu ullum option definitionem pro, est erat novum ornatus ea, utinam deleniti vim no. nec adipisci maluisset in, ex solum labores iudicabit sit. et quo fabulas admodum petentium. ea postulant iracundia contentiones quo. ea est oratio altera.</p>    <p>eam esse adhuc theophrastus et. sit ei duis fierent, cum ex eius iriure fabulas. nec albucius deserunt no. vix albucius placerat reprimique in, est ei erat nusquam referrentur.</p></div>

here jsfiddle you.

and here good source it.


Comments

Post a Comment

Popular posts from this blog

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

i have been trying send post request website, , has not been loading full site. i guessing problem node js not loading javascript content, executing it. can see javascript in response, though never loads content javascript files producing in html. what mean is, doesn't execute javascript. how make node js code overcome this, , wait the full website load? have tried native code, , "request' module, both producing same errors. if helps, don't need native javascript. modules fine. some code have tried (request module): var options = { method: 'post', uri: 'https://url', formdata: { 'email': 'email', 'prize': '0', 'transactional': 'on' }, headers: { /* 'content-type': 'application/x-www-form-urlencoded' */ // set automatically } }; rp(options) .then(function (body) { console.log(body) }) .catch(function (err) { console.log(err) }); when fetch content...
Read more

javascript - Replicate keyboard event with html button -

i have tried few ways make happen. have javascript pinball game uses keyboard keys controls. converting application touch screen display. workaround, hoping overlay buttons when clicked simulate keyboard strokes. have done research , sounds should work. using jquery v3.2.1 here things have tried far... html element: <input type="button" class="coil"></input> $('.coil').trigger({type: 'keydown', which: 40, keycode: 40}); with this, not errors, nothing happens. var coilkey = $('body').keydown(function(e) { switch (e.keycode) { case 40: break;} }) $('.coil').click(coilkey); this 1 returns error in console... ((jquery.event.special[handleobj.origtype] || (intermediate value)).handle || handleobj.handler).apply not function below javascript game engine handles key listeners... addkeylistener: function (keyandlistener) { this.keylisteners.push(keyandlistener); }, // gi...
Read more

javascript - Web audio api 5.1 surround example not working in firefox -

i've been playing lott lately web audio api on both firefox , chrome. few days ago started experiment surround set. when trying surround audio in web audio api came notice example works fine in chrome v59 not in firefox v54. // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); audioctx.destination.channelinterpretation = 'discrete'; audioctx.destination.channelcountmode = 'explicit'; audioctx.destination.channelcount = 6; var oscillators = []; var merger = audioctx.createchannelmerger(6); console.log(audioctx.destination, merger); //merger.channelinterpretation = 'discrete'; //merger.channelcountmode = 'explicit'; //merger.channelcount = 6; var addoscilator = function(channel, frequency) { var oscillator = audioctx.createoscillator(); oscillator.frequency.value = frequency; // value in hertz oscillator.connect(merger,0,channel); oscillator.start(); oscillators.push(o...
Read more