将左侧和右侧的元素放在同一行答案

【问题标题】：Put elements from left and right side to the same line将左侧和右侧的元素放在同一行
【发布时间】：2017-02-16 19:18:02
【问题描述】：

我使用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 的回答：

【问题讨论】：

您正在使用 p 元素及其占据全宽的块元素。因此请更改其显示类型或使用其他一些内联元素
我可以通过哪些元素更改<p>？ <ul> ?我对 html 真的很陌生
可以修改css属性吗？如果是这样，您可以尝试在 .alignleft 和 .alignright 上添加 display: inline-block
@Treeindev 不行^^我已经试过了
您能否通过一些屏幕截图告诉我您在做什么，并尝试使用此密码来编辑您的 html codepen.io/shivk/pen/LxaeyB

标签： html css django

【解决方案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>

【讨论】：

谢谢它运行良好。我只需要修改 border-right 和 border-left 空格，因为它似乎不起作用，但我将两个元素放在每一边
你知道我怎样才能将两个元素以横向格式放置在中心吗？ border-left 和 border-right 似乎不起作用
适合中心？什么意思？
例如，我想在右边框和右元素之间添加一个空格。我试过border-right 或padding-right 但似乎不适用于html2pdf
你是否在 .alignleft 上设置了 padding-left: 100px 和 padding-right: 100px 在 .alignright 上？

【解决方案2】：

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

【讨论】：

【解决方案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 中不起作用，因此我建议您使用引导网格系统。也可以在这里试一试

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

【讨论】：

它不起作用。别忘了我正在研究横向格式！您的示例似乎适用于带有 html 的纵向格式。但我使用的是横向格式和html2pdf。你的答案正是我在问题中的脚本
@Valentin 是的，我不知道为什么它不起作用，也试试 bootstrap

【解决方案4】：

为什么不使用flex？

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

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

【讨论】：

我的脚本 (pisaStatus = pisa.CreatePDF(html.encode('utf-8'), dest=file, encoding='utf-8')) 使用您的方法出错：Selector name or qualifier expected:: (u'', u'/\n\n \n\n ')
@Valentin 对不起。我完全错过了 PDF 部分。