0

ページを印刷しようとしています.....このために、2つの異なる列があります....そのため、1つの列の幅を減らして前の列を表示します.....しかし、私は2列目...

以下の私の印刷CSSを提供する

http://jsfiddle.net/pd7hF/embedded/result/

@media print 
 {
    .mainDiv { display: none;}

    .form-horizontal .control-label {width: 50px;}

     #poLeft { width: 300px; border: 1px solid red;}

     #billTo {width: 122px;}

     #cityLeft{width:40px;margin-left: 85px;height: 13px;}

     #stateLeft{width: 50px;height: 13px;width: 41px;}

     #zipLeft{width: 40px;height: 13px;}

     #countryLeft{width: 117px;margin-left: 62px;height: 13px;}

     #phoneLeft{width: 121px;height: 13px;}

     #emailLeft{width: 125px;}

     #noteLeft{width: 101px;}

     #poLeft{width: 154px;}  

     #poRight{width: 300px;}

     #fileRight{width: 101px;}

     /* any other styles you wish to target go here */
  }
4

1 に答える 1

0

@ user2045025印刷CSSを次のように変更します

        .mainDiv {display: none;width:100%;}
        label {padding-right:10px;}
        .form-horizontal .control-label {width: 20%;}
        #poLeft {width: 48%;border: 1px solid red;}
        #billTo {width: 92%;}
        #cityLeft{width:25%; margin-left:15%; height: 13px;}
        #stateLeft{  height: 13px; width: 5%;}
        #zipLeft{width: 20%; height: 13px;}
        #countryLeft{width:70%; margin-left:11%; height: 13px;}
        #phoneLeft{width:72%; height: 13px;margin-left:11%;}
        #emailLeft{ width:85%;}
        #noteLeft{width:80%;}
        #stateLabelLeft{display: inline-block; margin-left: 1px;}
        #zipLabelLeft{display: inline-block; margin-left: 1px;}
        #poRight{ width: 48%; }
        #fileRight{width: 92%;}

        #vendorListHeading{
            background-color: #1a4567; 
            color: white;
            border: 1px solid red;
          }

     #cityRight{width:20%;height: 13px;}
     #stateRight{width:5%;  height: 13px;}
     #zipRight{width:15%; height: 13px;}
     #countryRight{width: 34%; margin-left:55px; height:13px;}    
     #phoneRight{width:30%; height: 13px;}

    }
于 2013-02-16T06:44:26.077 に答える