个人中心
gpt4 book ai didi

html - 无响应的两列

转载 作者：行者123 更新时间：2023-11-28 15:13:08 25 4
gpt4 key购买 nike

我使用 bootstrap 并在报告中使用此结构:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h2>I want Two Equal Columns when printing a Portrait A4 Report </h2>
        <div class="container>
            <div class="row">
                  <div class="col-sm-6">
                        <h2>Left Column</h2>
                        <p>This is a test with a large information that I would like to have two columns even if printed in portrait mode.</p>
                  </div>
                  <div class="col-sm-6">
                        <h2>Right Column</h2>
                        <p>This is a test with a large information that I would like to have two columns even if printed in portrait mode.</p>
                  </div>
            </div>
        </div>
    </body>

当我以横向格式打印时一切正常:

enter image description here

但是当我以纵向打印时:

enter image description here

即使在纵向模式下，如何使两列并排显示？

最佳答案 

 body {
    margin: 0;
    padding: 0;
  }
  * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border-radius: 5px;
    background: white;
  }

  @page {
    size: A4;
    margin: 0;
  }
  @media print {
    .page {
      margin: 0;
      border: initial;
      border-radius: initial;
      width: initial;
      min-height: initial;
      box-shadow: initial;
      background: initial;
      page-break-after: always;
    }
  }
  table {
    background-color: transparent;
    width: 100% !important;
    margin-bottom: 0px;
  }
   
h2{
  font-size: 23px;
  margin-top: 10px;
    margin-bottom: 10px;
}
<!-- Bootstrap -->
  <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <!-- Normalize or reset CSS with your favorite library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  
   <div class="page">
<table>
      <tr>
        <td style="width: 100%"><h2>I want Two Equal Columns when printing a Portrait A4 Report </h2></td>
      </tr>
    </table>

<table>
      <tr>
        <td style="width: 50%"><h2>Left Column</h2></td>
        <td style="width: 50%"><h2>Right Column</h2></td>
      </tr>
    </table>


 <table>
      <tr>
        <td style="width: 50%"><p>This is a test with a large information that I would like to have two columns even if printed in portrait mode.</p></td>
         <td style="width: 50%"><p>This is a test with a large information that I would like to have two columns even if printed in portrait mode.</p></td>
      </tr>
    </table>



</div>

关于html - 无响应的两列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47695691/

25 4 0
文章推荐： javascript - 使用 jquery 将跨度类传递给数据属性
文章推荐： html - 使用 css 计数器如何创建一个可以设置计数器初始值的类？
文章推荐： javascript 模块模式上下文问题
文章推荐： javascript - 几个选择 : disable/hide/remove selected option in one select
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com