如何为每列设置特定位置的行样式（CSS）答案

【问题标题】：how to style rows with a specific position for each column (CSS)如何为每列设置特定位置的行样式（CSS）
【发布时间】：2022-08-11 03:25:38
【问题描述】：

我正在尝试获取此输出（它是发票）

在图像示例中，每列有 3 行，以垂直黑线为界，如果内容较大，则必须创建一个新行，如第二个元素所示并推动下面的行

HTML看起来像

<div class=\"items\">
    <div class=\"item\">
        <div class=\"amount\">3</div>
        <div class=\"description\"> Viajes a mexico </div>
        <div class=\"unit_price\">$ 1,900.00</div> 
        <div class=\"total\">$5,700.00</div>
    </div> 
    <div class=\"item\">
        <div class=\"amount\"></div>
        <div class=\"description\">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
        <div class=\"unit_price\"></div> 
        <div class=\"total\"></div>
    </div> 
    <div class=\"item\">
        <div class=\"amount\">1</div>
        <div class=\"description\">gastos</div>
        <div class=\"unit_price\">$22</div> 
        <div class=\"total\"></div>
    </div> 
</div>

我用了位置：绝对；设置剩下某些列中的属性，但如果我在所有列中使用绝对位置（一个），行被绘制在另一个顶部，所以我必须将该属性设置为最后一列

我在 CSS 方面没有经验，为我解决问题的是以下代码，但我想要第二个意见

CSS

div.items{
    position: fixed;
    top: 7.85cm;
    left: 1.2cm;
    width: 19.6cm;
    height: 4.5cm;
    border: 0px solid black;
}
div.item{ 
    display: flex;
    border: 0px solid blue;  
}

div.amount{
    left: 0.2cm;
    width: 2.1cm;
    border: 0px solid black;
}

div.descripcion{
    left: 2.4cm;
    width: 10cm;
    border: 0px solid black;
}

div.unit_price{
    left: 12.5cm;
    width: 1.5cm;
    border: 0px solid black;
    position: absolute;
}

div.total{
    left: 17cm;
    width: 2cm;
    border: 0px solid black;
    position: absolute;
}

问题是：如何在所有列中使用绝对属性而不将行绘制在彼此之上？

您不使用表格进行类似表格布局的任何原因？

标签： css

【解决方案1】：

position 将是最坏的布置这个的方式。

如果你不能使用table（你应该）使用 CSS 表格。

.items {
  display: table;
}

.item {
  display: table-row;
}

.item div {
  display: table-cell;
  padding: .25em;
  border: 1px solid grey;
}

<div class="items">
  <div class="item">
    <div class="amount">3</div>
    <div class="description"> Viajes a mexico </div>
    <div class="unit_price">$ 1,900.00</div>
    <div class="total">$5,700.00</div>
  </div>
  <div class="item">
    <div class="amount"></div>
    <div class="description">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
    <div class="unit_price"></div>
    <div class="total"></div>
  </div>
  <div class="item">
    <div class="amount">1</div>
    <div class="description">gastos</div>
    <div class="unit_price">$22</div>
    <div class="total"></div>
  </div>
</div>

【讨论】：