使div不像display：table那样表现得像一个表

Question

JSFiddle with the problem

标题应与内容完美结合

一切都被允许，只是不使用表格元素

<div style="">
    <div style="">
        <span  class="" >Firstname</span>
        <span  class="" >Lastname</span>
    </div>
    <div style="" class="">
        <span class=""  style=""> Tom </span>
        <span class=""  style=""> Jones </span>
    </div>
    <div style="" class="">
        <span class=""  style=""> Micheal </span>
        <span class=""  style=""> Jackson </span>
    </div>
    <div style="" class="">
        <span class=""  style=""> SomedudewithsuperlongFirstname </span>
        <span class=""  style=""> SomedudewithsuperlongLastname </span>
    </div>
</div>

css：

   span{
        display: inline-block;
        min-width: 100px;
    }
    div div {
        min-width: 100px;
    }

Answer 1

前奏

虽然您对使用表格感到厌倦是正确的，但如果您使用它们来表示表格数据，那很好！

但是，正如你正确地说的那样，它们有很多警告;特别是某些浏览器如何以不同方式解释它们，如评论部分中的Firefox 4 example所示。

虽然我认为上述一些问题可以通过CSS table styles，黑客和变通方法来解决，但我认为它不值得麻烦或开销。

如果您对HTML表格或CSS表格样式不满意，我们可以模拟一些<table>属性。

HTML

<div id="container">
    <div class="children">
        <p><span>Firstname</span></p>
        <p><span>Tom</span></p>     
        <p><span>SomedudewithsuperlongFirstname</span></p>     
    </div>
    <div class="children">
        <p><span>Lastname</span></p>
        <p><span>Jones</span></p>
        <p><span>SomedudewithsuperlongLastname</span></p>   
    </div>  
</div>

<强> CSS

#container{
    display: block;
    border: 1px dashed #ccc;    
    width: 500px;
    margin: 0 auto;
}
.children{
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.children > p > span{
    vertical-align: middle;
}

DEMO

Answer 2

如果您在DIV上寻找相同的宽度，最小宽度可能不是可行的方法。这仅确保元素的最小宽度。如果一个“单元格”中的内容超出此范围，则它们将不会排列。

也许尝试 width 而不是 min-width ？或者更大的 min-width ？