Question

我想实现这样的布局：

但我喜欢这样：

div中的c＆＃34; .post_admin＆＃34;位于div的前面＆＃34; .post_date＆＃34;并且＆＃34; .post_date＆＃34;之间没有分离。和＆＃34; .post_admin＆＃34;的div。

你知道这可能是什么问题吗？我将此代码放在一个文件中，此文件中的HTML和css呈现在用户下载的pdf文件中：

<!doctype html>
<html>
  <head>
    <style>


      .wrapper{
        width: 600px;
        display:block;
        margin: auto;
        border:1px solid gray;
        text-align:center;
      }

      .post-title{
        border-bottom: 1px solid gray;
        padding:20px;
        text-align:left;
      }

      .post-info{
        width:100%;
        display: flex;
        height: 100px;
      }

      .post-date{
        border-right:1px solid gray;
        padding: 20px;
        flex: 1;
        box-sizing:border-box;
        text-align: left;
      }

      .post-admin{
        padding:20px;
        box-sizing:border-box;
        text-align: left;
        flex: 1;
      }

      .post-category{
        border-top:1px solid gray;
        text-align: left;
        padding:10px;
      }

      .post-tags{
        border-top:1px solid gray;
        text-align: left;
        padding:10px;
      }


    </style>
  </head>
  <body>
    <ul>
      @foreach($posts as $post)



      <div class="wrapper">

        <div class="post-title">
          a
        </div>

        <div class="post-info">

          <div class="post-date">
            b
          </div>
          <div class="post-admin">
            c
          </div>
        </div>

        <div class="post-category">
          <span>d</span>
          <span> e</span>
        </div>

        <div class="post-tags">
          <span>f</span>
          <span>g</span>
        </div>
      </div>





      @endforeach
    </ul>

  </body>
</html>

Answer 1

我不能说你用来将HTML转换为PDF的软件包b / c我没有使用它的经验但我的猜测是它不完全支持flexbox，因为the css is correct for the layout you want。< / p>

当flexbox脱离工具带时，您可以尝试手动设置带有display: inline-block，width: 50%和height:100%的.post-info单元格。您可以将.post-admin float: right布局设为eliminate the space between inline-block elements。

所有在一起：

＆＃13;

.wrapper{
  width: 600px;
  margin: auto;
  border: 1px solid gray;
  text-align: center;
}

.wrapper > div:not(:last-child) {
  border-bottom: 1px solid gray;
}

.post-title{
  padding: 20px;
  text-align: left;
}

.post-info{
  width: 100%;
  height: 100px;
}

.post-date{
  display: inline-block;
  width: 50%;
  height: 100%;
  padding: 20px;
  border-right: 1px solid gray;
  box-sizing: border-box;
  text-align: left;
}

.post-admin{
  display: inline-block;
  float: right;
  width: 50%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}

.post-category{
  padding: 10px;
  text-align: left;
}

.post-tags{
  padding: 10px;
  text-align: left;
}

＆＃13;

<div class="wrapper">
  <div class="post-title">a</div>
  <div class="post-info">
    <div class="post-date">b</div>
    <div class="post-admin">c</div>
  </div>
  <div class="post-category">
    <span>d</span>
    <span>e</span>
  </div>
  <div class="post-tags">
    <span>f</span>
    <span>g</span>
  </div>
</div>

＆＃13;

HTML没有正确显示？（laravel-dompdf包）

1 个答案:

HTML没有正确显示？ （laravel-dompdf包）

1 个答案:

HTML没有正确显示？（laravel-dompdf包）