Html 如何使用CSS在一个div中使用多个span创建表

我有以下问题

我试图使用

span

创建两列，在

div

中有多行。 我可以得到2列，但不能得到多行

无法更改HTML代码

span{
显示：内联块；
}
.totalAmount dd:after、.oldTotal dd:after、.totalDue dd:after{
内容：'\A'；
空白：预处理；
}
.totalAmount、.oldTotal、.totalDue{
浮动：左；
}
.totalAmount dd、.oldTotal dd、.totalDue dd{
浮动：对；
}

总数：
100美元
以前支付的：
50美元
应付金额：
50美元

有趣的是，您不能更改html，因为从spans构建表似乎有点奇怪

我想你会想清除你的浮动，因为与浮动相关的高度问题。使用类似或

---

试试看，如果没有帮助，请告诉我。

您可以使用

float:left并给它们50%的宽度。并使用clearfix，以避免事后将页面弄乱


span{
显示：内联块；
}
.totalAmount dd:after、.oldTotal dd:after、.totalDue dd:after{
内容：'\A'；
空白：预处理；
}
.totalAmount、.oldTotal、.totalDue、.totalAmount dd、.oldTotal dd、.totalDue dd{
浮动：左；
宽度：50%；
}

总数：
100美元
以前支付的：
50美元
应付金额：
50美元
您可以删除自己的整个css，并使用以下简单的css片段解决它：

.payment-breakdown span{
  display: block;
  width: 50%; 
  float: left;
}


您可以使用伪选择器
n个子项（奇数）
和
n个子项（偶数）
设置每个列的样式

Flexbox可以做到这一点


。付款明细表{
显示器：flex；
柔性包装：包装；
宽度：50%；
保证金：1em自动；
边框：1px纯灰；
}
跨度{
弹性：0.50%；
}
.总金额，
oldTotal先生，
.全部到期{
文本对齐：左对齐；
}
.totalAmount：：之后，
.oldTotal：：之后，
.totalDue:：之后{
文本对齐：左对齐；
显示器：flex；
}
.总金额dd，
.oldTotal dd，
.totalDue dd{
文本对齐：右对齐；
}

总数：
100美元
以前支付的：
50美元
应付金额：
50美元
试试这个代码spinet

.payment-breakdown {
    overflow: auto;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.payment-breakdown span {
      display: inline-block;
      float: left;
      display: table-cell;
      width: 25%;
  }

您可以添加一些javascript，在每个元素之后添加一个br标记。
“严格使用”；
var span=document.getElementsByTagName（“span”）；
对于（变量i=0；i”；
}
span{
显示：内联块；
}
.totalAmount dd:after、.oldTotal dd:after、.totalDue dd:after{
内容：'\A'；
空白：预处理；
}
.totalAmount、.oldTotal、.totalDue{
浮动：左；
}
.totalAmount dd、.oldTotal dd、.totalDue dd{
浮动：对；
}

总数：
100美元
以前支付的：
50美元
应付金额：
50美元
您为什么不使用桌子？同意……这显然是一个放置实际桌子的地方。它非常有用。我理解显示器和浮子。但是为什么要做50%的宽度来创建正确的列呢？嘿@laurent，这是一个“大”问题。我建议阅读本文：-由于所有元素都希望向左浮动，并且它们可以使用100%的父div，仅使用一半大小（50%）就可以让两个跨度元素使用同一行。谢谢，我将了解有关flex box的更多信息。