dompdf和3列圣杯不工作(列并排)

时间:2015-03-27 01:14:06

标签: css cakephp dompdf

如何让dompdf使用3列圣杯布局?

我需要带有3个垂直列的pdf。对于html页面很好,通过dompdf完成时会出现问题。

我摆弄了/dompdf/lib/res/html.css并添加了3列样式。

pdf文件确实反映了html.css文件中的css更改 - 颜色,页脚等,但无法并排容纳col1,col2和col3。

<div class="colmask threecol">
<div class="colmid">
    <div class="colleft">
        <div class="col1">
            <p>Inside col1</p>
        </div>       
        <div class="col2">
            <p>Inside col2</p>
        </div>
        <div class="col3">
            <p>Inside col3</p>
        </div>
    </div>
</div>
</div>   

可能dompdf会覆盖我的div类。我发现html.css是默认的,所以我对它进行了切割,我还想找到一种更好的方式将我的样式赋予dompdf?

你能帮忙吗?

非常感谢你。

(css调整为70%,宽度不同)

.colmask {
position:relative;  /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:70%;          /* width of whole page */
overflow:hidden;        /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;         /* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;  /* no left and right padding on columns, we just make them narrower instead 
                only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}

.col1 {
border-bottom:1px solid #fbd850; 
}
.col2 {
border-bottom:1px solid #ee5f5b;
}
.col3 {
border-bottom: 1px solid #00c;
}

/* 3 Column settings */
.threecol {
background:#eee;        /* right column background colour */
    border-bottom: 1px solid black;
}
.threecol .colmid {
right:25%;          /* width of the right column */
background:#fff;        /* center column background colour */
}
.threecol .colleft {
right:50%;          /* width of the middle column */
background:#f4f4f4; /* left column background colour */
}
 .col1 {
width:20%;          /* width of center column content (column width minus padding on either side) */
            /* 100% plus left padding of center column */
}
.col2 {
width:25%;          /* Width of left column content (column width minus padding on either side) */
left:24%;           /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.col3 {
width:20%;          /* Width of right column content (column width minus padding on either side) */
left:80%;           /* Please make note of the brackets here:
                (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

0 个答案:

没有答案