CSS 根据内容对齐列中的项目

Posted 2023-03-06

【中文标题】CSS 根据内容对齐列中的项目

【英文标题】：CSS Align items in a column depending on content

【发布时间】：2022-01-08 23:40:34

【问题描述】：

我有以下带有自己的 css 和引导类的 html 代码：

<div class="d-flex">
    <p class="table-string">91.86</p>
    <span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
    <p class="table-string">108.15</p>
    <span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
    <p class="table-string">329.93</p>
    <span class="ml-2">(+593%)</span>
</div>

还有 CSS：

.table-string 
    width: 100%;
    text-align: end;

我需要收到这样的专栏：

但实际上得到了这个：

如何在列中对齐不带百分比的值，以使它们彼此严格低于：数百低于数百，十低于十，一个低于一个？并且值和百分比必须在字段的末尾对齐。感谢您的帮助

【问题讨论】：

@connexoi 我忘了说我也使用引导程序

这太简单了。 （不考虑中间箭头符号）您只需要两个 50% 宽度的子元素，内容分别右/左对齐。如果中心箭头符号是必要的，那么您需要的是其左右元素为 flex 1

@connexo 我使用 text-align: end to aligned text in p at end

@RokoC.Buljan 这可能是解决方案，但我需要这些值在字段的末尾对齐，而不是在中间

对齐父元素与其子元素的对齐方式无关；）如果您使用带有列的表格......您应该为您的问题添加更多上下文。仅从您的图像中不清楚整张图片是什么。

【参考方案1】：

作为临时解决方案，您可以使用类似的方法。只需设置<p> 和<span> 标签的width: 50%;。

.table-string 
    width: 50%;
    text-align: end;

span.ml-2 
    width: 50%;
    text-align: left;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-flex">
    <p class="table-string">91.86</p>
    <span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
    <p class="table-string">108.15</p>
    <span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
    <p class="table-string">329.93</p>
    <span class="ml-2">(+593%)</span>
</div>

【讨论】：

使用 Bootstrap 通常不需要添加额外的 CSS，但是通过添加它，我们为 Bootstrap 标准 CSS 提供了更多的机会。

【参考方案2】：

你需要将你的行分成两等份，并根据情况对齐文本

<div class="row" style="width:10rem">
    <p class="col-6 p-1 text-end">91.86</p>
    <span class="col-6  p-1 text-start">(+61%)</span>
</div>

这是example

如果你还需要什么，请告诉我

【参考方案3】：

从所有 Div 中删除 d-flex 并将 d-inline 放到所有 <p> 和 <span> 上。有了这个，您很可能不需要 .table-string 的 CSS，因此也将其删除。

例如

<p class="d-inline">91.86</p>
<span class="ml-2 d-inline">(+61%)</span>

【讨论】：

但是如果它解决了我的问题呢？

可能，我现在太忙了，无法测试它，但通常我会这样做。试一试。

【参考方案4】：

显然你正在使用 Bootstrap，如果我理解你的问题，你只需要在弹性项目中添加两个类，flex-columnalign-items-end，以便设置弹性项目的方向并更改对齐方式横轴：

<div class="d-flex flex-column align-items-end">
[…]
</div>

【讨论】：

align-items 用于垂直对齐。

@christo 我们可以在内容本身上使用align-items-*。例如，OP 的<p> 标签之一。但是justify-content-* 非常适合在父 Div 上使用。因此，您可以直接格式化内容，也可以编辑其父 div。