带有2列的项目列表:第一列应该包裹长文本，第二个不得

我有一个产品列表，只有2列。

第一列：包含产品标题 - 并且可能包含短文本或长文本。

第二列：包含使用货币符号，数字值，空间空间的产品价格 - 货币代码(例如USD(

我需要一个响应式设计，可以包裹拳头列，但不包括第二个。

我仲裁将第二列的宽度设置为固定的PX，但理想情况下它应该自动设置为数据集中的最长值。

我需要一个非flexbox解决方案 - 因为我们仍然需要支持IE10，但是，如果某人有flexbox解决方案 - 那将是未来的好。

注意 - 我在StackoverFow中搜索解决方案，而唯一的完整是2014年仍使用表方法。这对于非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结构，您不做difsdivs作为UL的子元素。

第二，，我建议您使用 CSS网格系统。它具有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;
}

在这里，我们已经网格两个网格，一个用于封装所有产品的主要容器。该网格由重复和 auto-fit 生成，这意味着它将创建与可用的宽度一样宽的列。

我已经设置了 minmax 设置这些列的最小宽度，您可以将其设置为 min-content 或 max-content

最后，我将所有这些单个产品都成为 o的网格。这将满足您对第1列和第2列的需求...在其中您可以为第1列设置固定值，并留下第2列以获取内容所需的空间。

一个gotcha， min-content 倾向于新行，其中 max-content 将主要留在同一条线上。

这是最终版本的链接

相关内容

最新更新

热门标签：