css - 需要 CSS 方面的帮助 - 在没有表格的情况下对齐数据

Question

我正在努力学习 CSS，尤其是我正在努力摆脱表格，因为表格非常容易使用。

我创建了 jsfiddle 来查看我做了什么:

http://jsfiddle.net/HMtSY/

我无法将所有数据对齐到比例单元格中。请协助

<div class="cartItem">
    <span class="cartProductTitle">Product</span> <span class="cartProductModel">
    Model</span> <span class="cartProductPrice">Price</span>
    <span class="cartProductQty">Qty</span> </div>
<div class="cartItem">
    <span class="cartProductTitle">This is the product title</span>
    <span class="cartProductModel">mdsdre12es</span>
    <span class="cartProductPrice">9.95</span> <span class="cartProductQty">1</span>
</div>
<div class="cartItem">
    <span class="cartProductTitle">Product 2</span>
    <span class="cartProductModel">mds12es</span> <span class="cartProductPrice">
    1119.95</span> <span class="cartProductQty">199</span> </div>
<div class="cartItem">
    <span class="cartProductTitle">This is the product title product 100000</span>
    <span class="cartProductModel">as</span> <span class="cartProductPrice">9.95</span>
    <span class="cartProductQty">22221</span> </div>

//CSS

.cartItem
{
    display: table-cell;    
    padding: 5px; 
    width: 600px;
    min-width: 600px;        
    float:left ; 
}
.cartProductTitle
{   
    display: table-cell;    
    padding: 5px; 
    width: 350px;
    min-width: 350px;
}
.cartProductModel
{   
    display: table-cell;    
    padding: 5px; 
    width: 150px;
    min-width: 150px;
}
.cartProductPrice
{   
    display: table-cell;    
    padding: 5px;    
    width: 30px;
    min-width: 30px;  
}
.cartProductQty
{   
    display: table-cell;    
    padding: 5px; 
    width: 30px;
    min-width: 30px;  
}

Answer 1

并不是所有的表都是邪恶的!

用于布局的表格 是，但这不是用于布局的表格，您正在显示表格数据，就像应该与表格一起显示的数据一样!

这意味着在您的案例中使用表格是完全可以接受，甚至是正确的解决方案。

所以是的，在这种情况下使用表格。这不是布局，所以没关系:)