我有一个产品列表，只有 2 列。
第一列:包含产品标题 - 可能包含短文本或长文本。
第 2 列:包含产品价格 - 格式为货币符号、数值、空格，然后是货币代码(例如 USD)
我需要一个包含第一列而不是第二列的响应式设计。
我已经任意地将第二列的宽度设置为固定像素，但理想情况下它应该自动设置为数据集中最长的值。
我需要一个非 FlexBox 解决方案——因为我们仍然需要支持 IE10， 但如果有人有 FlexBox 解决方案——那对 future 来说会很棒。
注意 - 我在 stackoverfow 中搜索解决方案，唯一完整的解决方案来自 2014 年，它仍然使用 TABLE 方法。这对非 flexbox 仍然适用吗？
<style>
.productLine {
width: 100%;
clear: both;}
.title {
width: calc(100% - 60px);
float: left;
overflow-wrap: normal;
}
.price {
width: 60px;
float: right;
}
</style>
<html>
<ul class="productLine">
<div class="title">Short example of title</div>
<div class="price">$1.00 USD</div>
</ul>
<ul class="productLine">
<div class="title">Long example of title blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
<div class="price">$20.00 USD</div>
</ul>
<ul class="productLine">
<div class="title">3rd example of title </div>
<div class="price">$1,000.00 USD</div>
</ul>
</html>
最佳答案
首先，更改您的 HTML 结构，不要将 div 作为 ul 的子元素。
其次，我建议您使用CSS 网格系统。它有 partial support with prefix for IE10它是目前 CSS 中最先进的定位系统。
你可以这样做:
<div class="products">
<div class="products__single">
<div class="title">Short example of title</div>
<div class="price">$1.00 USD</div>
</div>
<div class="products__single">
<div class="title">Short example of title</div>
<div class="price">$1.00 USD</div>
</div>
<div class="products__single">
<div class="title">Short example of title</div>
<div class="price">$1.00 USD</div>
</div>
</div>
和样式:
.products {
display:grid;
grid-template-columns: repeat( auto-fit, minmax(8rem, min-content))
}
.products__single {
display: grid;
grid-template-columns: 4rem min-content;
}
这里我们设置了两个网格，一个用于封装所有产品的主容器。此网格由repeat 和auto-fit 生成，这意味着它将创建宽度尽可能多的列。
我设置了 minmax 来设置这些列的最小宽度，你可以将其设置为 min-content 或 max-content。
最后，我将所有这些单个产品都变成了一个网格o。这将解决您对第 1 列和第 2 列的需求...您可以在其中为第 1 列设置一个固定值，并让第 2 列占用内容所需的空间。
有一个问题，min-content 倾向于新行，而 max-content 将主要停留在同一行。
关于css - 2 列的元素列表 : 1st should wrap long text, 第二个不能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57280850/