Html 将元素从左侧和右侧放到同一行
我在我的Html 将元素从左侧和右侧放到同一行,html,css,django,Html,Css,Django,我在我的Django项目中使用html2pdf，以便创建一些PDF文件，我遇到了一个HTML问题 我想把两个元素放在同一条线上，但第一个位于右侧，另一个位于左侧 我的脚本看起来像： <html> <head> {% load staticfiles %} <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="
Django项目中使用html2pdf
，以便创建一些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>
{%load staticfiles%}
身体{
字体系列：Courier New、Courier、monospace；
/*文本对齐：对齐*/
列表样式类型：无；
}
.左对齐{
浮动：左；
右边界：100px；
}
.对{
浮动：对；
左边框：100px；
}
.头衔{
边框顶部：150px；
字号:7 ;；
}
{%块样式%}
@页面{
规模：景观；
}
{%endblock%}
重新认证
lemaire de la commune
de{{mairie.city}
改进{{ar.id}
意向书。。。du XX XX XXXX
但我无法将alignleft
和alignright
类放在同一行
我正在使用库html2pdf
来实现这一点，因此不考虑所有CSS命令
如果你有主意，谢谢你
编辑：
这就是我通过@ShivkumarKondi得到的答案：
两者都必须向左浮动，并且您必须将它们应用于每个对象的显示属性。可能显示：内联 两者都必须向左浮动，并且必须将它们应用于每个对象的显示属性。可能显示：内联 普通float属性在这里对于任务来说已经足够了，它将为您提供以下输出
.alignleft{
浮动：左；
右边界：100px；
背景：红色；
}
.对{
浮动：对；
左边框：100px；
背景：红色；
}
lemaire de la commune
de{{mairie.city}
改进{{ar.id}
意向书。。。du XX XX XXXX
普通浮点属性对于任务来说已经足够了，它将为您提供以下输出
.alignleft{
浮动：左；
右边界：100px；
背景：红色；
}
.对{
浮动：对；
左边框：100px；
背景：红色；
}
lemaire de la commune
de{{mairie.city}
改进{{ar.id}
意向书。。。du XX XX XXXX
根据答案，问题在于html2pdf本身，因为它没有像应该的那样呈现css浮动
尝试用
包装html。像这样：
#upp{
宽度：100%；
/*背景：红色*/
}
.左，
.对{
显示：内联块；
背景：红色；
}
.左对齐{
左侧填充：100px；
}
.对{
右边填充：100px；
}
lemaire de la commune
de{{mairie.city}
改进{{ar.id}
意向书。。。du XX XX XXXX
根据答案，问题在于html2pdf本身，因为它没有像应该的那样呈现css浮动
尝试用
包装html。像这样：
#upp{
宽度：100%；
/*背景：红色*/
}
.左，
.对{
显示：内联块；
背景：红色；
}
.左对齐{
左侧填充：100px；
}
.对{
右边填充：100px；
}
lemaire de la commune
de{{mairie.city}
改进{{ar.id}
意向书。。。du XX XX XXXX
为什么不使用flex
.outter{
显示器：flex；
证明内容：之间的空间；
}
左边
正确的
为什么不使用flex
.outter{
显示器：flex；
证明内容：之间的空间；
}
左边
正确的
您使用的是p元素及其全宽块元素。因此，请更改其显示类型或使用其他内联元素，通过这些元素，我可以更改
<代码>
？我对HTMLC很陌生你能修改css属性吗？如果是这样，您可以尝试在.alignleft
和.alignright
@Treeindev上添加display:inline block
，它不起作用^^^我已经尝试过了，您可以通过一些屏幕截图告诉我您的想法吗，并尝试使用此代码PIN编辑您的html。您使用的是p元素及其全宽块元素。因此，请更改其显示类型或使用其他内联元素，通过这些元素，我可以更改
<代码>
？我对HTMLC很陌生你能修改css属性吗？如果是这样，您可以尝试在.alignleft
和.alignright
@Treeindev上添加display:inline block
，它不起作用^^^我已经试过了。您可以通过一些屏幕截图告诉我您的想法，并尝试使用此代码PIN编辑您的html它不起作用。别忘了我在做风景画！您的示例似乎使用html处理纵向格式。但我使用的是横向格式和html2pdf
。你的答案正是我的剧本question@Valentin是的，我不知道为什么它不起作用，只是尝试一下引导，它不起作用。别忘了我在做风景画！您的示例似乎使用html处理纵向格式。但我使用的是横向格式和html2pdf
。你的答案正是我的剧本question@Valentin是的，我不知道为什么它不起作用，只要试试bootstrap牙刷就可以了。它工作得很好。我只需修改右边框
和左边框
空格即可