Html 将段落浮动右侧部分的文本左对齐

我需要给一些浮动的右文本相同的起始位置。我有多个p，每个p被分成两个跨度。初始跨距向左浮动，秒向右浮动

一些HTML和图像需要更清楚

.card{
最大宽度：20雷姆；
边框：1px实心#004d99；
边界半径：20px；
}
.卡头{
背景色：#fff；
边框底部：1px实心#004d99；
边框左上半径：20px；
边框右上角半径：20px；
}
.卡头输入{
边框：2px#004d99实心；
}
.卡头跨度{
颜色：#90ee90；
}
.卡头跨度i{
左缘：3%；
}
.卡体{
边缘底部：0px；
边际上限：0px；
}
.卡体p跨度：第一个孩子{
浮动：左；
}
.卡体p跨度：最后一个子卡{
浮动：右；文本对齐：左；
}

Stato:Pubblicato⬤ 11 112

诺姆：
普罗瓦彩票


数据发布：
10/12/2021


斯加登扎数据中心：
25/12/2021


附属品：
链接

您可以使用flexbox实现这一点，并在此过程中简化HTML

从

span

元素中删除内联样式，并设置CSS，使flex子元素正好占据一半的空间。这将为您提供所需的布局

.card body>p{
显示器：flex；
flex-flow：行nowrap；
}
.card body>p>*{
弹性：1；
}

Stato:Pubblicato⬤ 11 112
诺姆：洛托普罗瓦

数据发布日期：2021年10月12日

斯加登扎数据：2021年12月25日

附件：链接

实际上，这种类型的内容是一个典型的示例，您可以使用表格，其默认设置将完全满足您的要求。因此，我相应地修改了您的代码，使用CSS table

display

parameters（但您也可以使用实际的HTML table/tr/td/th标记，这样您就不需要那个CSS，而且在语义上会更好）

注意：我删除了跨距的内联样式，也从卡片中删除了

md-3

类，因为否则，内容根本无法放入每行的卡片行中，但由于宽度有限而导致中断，至少在片段中是这样（在宽屏幕上不同）

.card{
边框：1px实心#004d99；
边界半径：20px；
宽度：300px；
}
.卡头{
背景色：#fff；
边框底部：1px实心#004d99；
边框左上半径：20px；
边框右上角半径：20px；
}
.卡头输入{
边框：2px#004d99实心；
}
.卡头跨度{
颜色：#90ee90；
}
.卡头跨度i{
左缘：3%；
}
.卡体{
边缘底部：0px；
边际上限：0px；
显示：表格；
}
.card body>p{
显示：表格行；
}
.card body>p>span{
显示：表格单元格；
}

Stato:Pubblicato⬤ 11 112

诺姆：
普罗瓦彩票


数据发布：
10/12/2021


斯加登扎数据中心：
25/12/2021


附属品：
链接

避免使用float属性，现在您可以通过使用网格或flexbox来实现这一点。例如，您似乎正在使用bootstap。。。如果你使用版本4，你有flex实用程序。阅读关于它的文档。你的卡体是表格数据，那么为什么不使用

表格

或至少CSS表格-@Paulie_D？这也是一个很好且干净的选项，但是当我调整页面大小时，表格内的数据会从卡体外移出。我也试着给卡体一个最大宽度，但它似乎不起作用。为什么不使用引导提供的类呢？使用布局库时，自定义样式应该是最后的选择。我大部分同意你的看法。我倾向于选择简单的解决方案，这就是我提出这种方法的原因。易于调试。对每个人来说，添加几个类似乎比创建更多代码来维护更简单。此外，你有不适当的嵌套标记，包括段落。这取决于你如何处理生态系统中的一切。我使用SCS将所有内容编译成一个文件。仅使用我的应用程序中必需的引导部分。