使用div标记格式化标记输出，而不是使用jQuery格式化html表

我想请求帮助格式化jQuery代码生成的HTML输出，使用div标记代替表

这是电流输出：

 Box #01
 Box #02
 1
 2

我需要输出为：

 Box #01    1
 Box #02    2

这显示了jquery和标记

理想情况下，我希望仅使用div标记实现相同的效果。 如果有人知道这样做的方法，读一下你的想法会很好

非常感谢。

是您的解决方案

使用这个css

.ShoppingCart{
    float:left;
}
.shoppingCart_Category{
    float:left;
}
.shoppingCart_qtyLabel{
    display:inline-block;
}
br{
    clear:both;
}

---

只要做下面这样的事情

 div { /* Use your id's or classes */
    min-width: 80px;
    display: inline-table;
    margin-right: 10px;
}

---

注意：调整以满足您的需要

这是您最新的小提琴

如果我要这样做，我会将每个描述和数量放在一个div中，而不是用换行符分隔两列数据，但这会让您了解如何格式化它。我只使用了显示块和左右浮动

CSS:

我稍微修改了你的HTML

<div id="orderWrapper">
    <div id="itemOrderPreview"></div>
    <div id="qtyOrderPreview"></div>
</div>

---

我刚刚更新了您的代码：

$.each($('.ShoppingCart'), function (i,j) {
 var cab = $(this).html();    
 $.each($('.shoppingCart_qty-select'), function (k,v) {
    if(i==k){  
      $("#test").append(cab + " " + $.trim($(this).find('option').html()) + "</br>");
    }
 });
});

$。每个（$（'.ShoppingCart'），函数（i，j）{
var cab=$（this.html（）；
$。每个（$（'shoppingCart_qty-select'），函数（k，v）{
如果（i==k）{
$（“#test”）.append（cab++.trim（$（this.find（'option'）.html（））+“
”）；
}
});
});

---

工作提琴：请在实际问题中包含您的代码。我包含了包含示例html的提琴。我想我需要包括这一点。使用css

display:table

property fiddle很好，而且确实包含了它们，但是你也应该在问题本身中发布代码（将来可能会有一天JSFIDLE不可用）。所有建议的答案都很好，而且都很有效。我不知道如何将这些问题标记为已回答。只需选择更适合您需要的，我们都很乐意提供帮助，所以不要担心。

$.each($('.ShoppingCart'), function (i,j) {
 var cab = $(this).html();    
 $.each($('.shoppingCart_qty-select'), function (k,v) {
    if(i==k){  
      $("#test").append(cab + " " + $.trim($(this).find('option').html()) + "</br>");
    }
 });
});