CSS根据最宽的元素将列向右对齐

Question

我有如下图所示的两列布局：

每一列包含由一个图标和一个文本标签组成的行。

左列的每一行都必须按原样左对齐。

右列的行必须以这样一种方式对齐，即最宽的行与父容器的右边缘接触，而其他行对齐，以便它们的左边缘对齐，如下图所示：

很难理解...我正在考虑将容器的display 设置为flex，将每列的flex 设置为1，以便它们具有相等的宽度，然后试图对右列的行做一些事情，但我不知道是什么。我事先不知道文本的标签是什么，但我确信它们的长度可能会有很大差异并且可以换行。包装标签是否可以在包装后向右对齐？

这是我目前拥有的代码https://jsfiddle.net/t7qksr3g/1/。它基于@Kretiss 的回答，但不能正常工作。当右列中的文本换行时，它不会向右对齐。

我希望有人可以帮助我。解决方案可以和我上面描述的完全不同，并不要求行实际上是在垂直容器内，我只需要实现视觉效果。

更新

我认为如果不使用 JS，我想要实现的目标可能是不可能的，因为浏览器用于计算容器宽度和内部包装文本的逻辑无法以允许它CSS Width / Max-Width on Line Wrap? 的方式工作。

Answer 1

最后，我找到了解决方案。由于我的原始解决方案已包含在问题中，因此我将将此答案编辑为新答案。

这是工作小提琴：https://jsfiddle.net/Kretiss/mbt68qw2/

首先，这里是 HTML。将editWidth 类添加到可能被编辑的段落中。

<div class="container">

    <div class="column">
      <div class="columnChild">
        <img src="smile.jpg">
        <p class="">Some text</p>
      </div>
      <div class="columnChild">
        <img src="smile.jpg">
        <p>Some text that wraps because its long long long</p>
      </div>
      <div class="columnChild">
        <img src="smile.jpg">
        <p>Some text</p>
      </div>
    </div>

    <div class="column">
        <div class="columnChild">
          <img src="smile.jpg">
          <p>Some longerrrrr text</p>
        </div>
        <div class="columnChild">
          <img src="smile.jpg">
          <p>Some text</p>
        </div>
        <div class="columnChild">
          <img src="smile.jpg">
          <p class="editWidth">Some text that wraps because its long sad Some text that wraps because its long</p>
        </div>
    </div>

  </div>

CSS 几乎相同。

*{
  box-sizing: border-box;
}

.container{
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 2px solid black;
}

.column{
  width: fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  border: 1px solid red;
}

.columnChild{
  display: flex;
  justify-content:flex-start;
  align-items: center;
}

.columnChild img{
  height: 50px;
}

这就是魔法。例如，通过此脚本将 JQuery 包含到文件中 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 然后添加这个脚本：

<script>
$(document).ready(function(){

  $.fn.textWidth = function(){
    const html_org = $(this).html();
    const html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    const width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
  };

  function changeWidth(resizing){
    const elements = $(".editWidth");

    elements.each(function(index){
      if(resizing) $(this).css("width", "auto");

      const currentWidth = $(this).textWidth();
      $(this).css("width", currentWidth + 2);

    });

  }

  changeWidth(false);

  $(window).resize(function(){
    changeWidth(true);
  });

});

</script>

加载 DOM 后，所有内容都以 changeWidth(false); 开头。它使用 false 参数调用 changeWidth(resizing) 函数，因为浏览器窗口没有调整大小。此函数循环遍历所有段落，其中包含editWidth 类。在.each() 函数内部调用$.fn.textWidth 函数，该函数返回段落内文本的精确宽度。之后，$(this).css("width", currentWidth + 2); 行将段落宽度设置为文本宽度 + 2px（您可以根据需要更改）。

当用户调整浏览器大小时，

$(window).resize(function(){
  changeWidth(true);
});

被调用并执行与上述相同的操作。唯一的区别是它首先将段落的宽度设置为自动，否则文本的宽度可能与实际不同。

返回文本精确宽度的函数来自这篇文章：Calculating text width