css - HTML 显示不正确？ (laravel-dompdf 包)

我想实现这样的布局:

但是我是这样的:

div ".post_admin"中的 c 在 div ".post_date"的 b 之前，并且 ".post_date"和 ".post_admin"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>

最佳答案

对于你用来将 HTML 转换为 PDF b/c 的包，我不能说太多我没有这方面的经验，但我的猜测是它不完全支持 flexbox，因为 the css is correct for the layout you want .

使用 flexbox 关闭工具带，您可以尝试使用 display: inline-block 手动设置 .post-info 单元格的样式。 , width: 50% , 和 height:100% .你可以给.post-admin float: right布局到 eliminate the space between inline-block elements .

一起:

.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;
}

<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>

关于css - HTML 显示不正确？ (laravel-dompdf 包)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50882317/

css - HTML 显示不正确？ (laravel-dompdf 包)

上一篇：css - 带覆盖的 SASS 继承

下一篇：twitter-bootstrap - 手动更改用于打印的介质宽度