Question

我正在使用html2pdf和我的Django project来创建一些PDF文件，但我遇到了HTML问题。

我想把两个元素放在同一条线上，但第一个位于右侧，另一个位于左侧。

我的脚本如下：

<html>
    <head>
    {% load staticfiles %}

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" type="text/css" href="{% static 'css/BC_base.css' %}"/>

    <style>

        body {
                font-family: Courier New, Courier, monospace;
                /*text-align: justify;*/
                list-style-type: none;
            }

        .alignleft {
                float: left;
                border-right : 100px;
            }
        .alignright {
                float: right;
                border-left: 100px;
            }

        .title {
                border-top: 150px;
                font-size: 7;
        }

        {% block style %}
                @page {
                size: landscape;
                }

        {%endblock%} 
    </style>

    </head>

        <h2 class = "title" align="center" > ATTESTATION DE RECENSEMENT </align> </h2>

        <div id="textbox">
            <p class="alignleft">Le maire de la commune <br />de {{mairie.city}}</p>
            <p class="alignright">Imprimé n° {{ar.id}}<br/> Loi n° ... du XX XX XXXX</p>
        </div>

但我没有克服把alignleft和alignright类放在同一行。

我正在使用库html2pdf来执行此操作，因此不会考虑所有CSS命令。

如果您有任何想法，谢谢你？

编辑：

这是@ShivkumarKondi回答的问题：

Answer 1

根据this回答，问题是html2pdf本身，因为它不会像它应该那样呈现css浮点数。

尝试使用<table>包装html。像这样：

#upp {
  width: 100%;
  /*background:red;*/
}
.alignleft,
.alignright {
  display: inline-block;
  background: red;
}
.alignleft {
  padding-left: 100px;
}
.alignright {
  padding-right: 100px;
}

<table id="upp">
  <tr>
    <td>
      <p class="alignleft">Le maire de la commune <br />de {{mairie.city}}</p>
    </td>
    <td></td>
    <td align="right">
       <p class="alignright">Imprimé n° {{ar.id}}<br/> Loi n° ... du XX XX XXXX</p>
    </td>
  </tr>
</table>

Answer 2

两者都必须向左浮动，你必须为它们应用一个显示属性。可能显示：内联。

Answer 3

正常浮动属性对于任务来说就足够了，它为您提供了以下输出

.alignleft {
  float: left;
  border-right : 100px;
  background:red;



}
.alignright {
  float: right;
  border-left: 100px;
  background:red;
}

<div id="textbox">
  <p class="alignleft">Le maire de la commune <br />de {{mairie.city}}</p>
   <p class="alignright">Imprimé n° {{ar.id}}<br/> Loi n° ... du XX XX XXXX</p>
</div>

更新：

在你的情况下，浮点数不能用于html2pdf，所以我建议你选择bootstrap网格系统。在这里试试吧

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> 

<div class="row" style="background:grey;">
  <div class="col-xs-3">content left</div>
  <div class="col-xs-6"></div>
  <div class="col-xs-3" style="text-align:right;">content right</div>
</div>

</body>
</html>

Answer 4

为什么不使用flex？

＆＃13;

.outter {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<div class="outter">
  <div>LEFT</div>
  <div>RIGHT</div>
</div>

＆＃13;

将元素从左侧和右侧放在同一条线上

4 个答案: