使 div 表现得像一个表格，而不使用 display: table答案

【问题标题】：Making divs behave like a table, without using display: table使 div 表现得像一个表格，而不使用 display: table
【发布时间】：2014-05-15 20:35:38
【问题描述】：

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;
    }

【问题讨论】：

只是出于好奇，这看起来像表格数据，为什么不使用表格呢？
我会继续使用表格，无论如何它的表格数据......但是你在这里 -> jsfiddle.net/J83sG
@JackWilliams 你的例子没有考虑到自动垂直高度调整一个 html 表格会做。
我刚刚创建了一个new fiddle，它的行为应该更像一张桌子。如果要支持 IE7 或更低版本，则需要使用inline-block hack。
@Toskan 你为什么不喜欢桌子？如果您解释一下，也许我们可以消除一些误解。对于这个特定的例子，桌子是完美的、100% 合适的解决方案。

标签： html css

【解决方案1】：

前奏

虽然您厌倦了使用表格是对的，但如果您使用表格来表示表格数据，那很好！

但是，正如您所说的那样，它们有很多警告；尤其是某些浏览器如何以不同方式解释它们，如 cmets 部分中的 Firefox 4 example 所示。

虽然我认为前面提到的一些问题可以通过 CSS table styles、hacks 和解决方法来克服，但我认为这不值得麻烦或开销。

如果您对 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

【讨论】：

修复firefox 4链接可能
完成，对此感到抱歉。

【解决方案2】：

如果您在 DIV 上寻找相同的宽度，min-width 可能不是最佳选择。这只确保元素是最小宽度。如果一个“单元格”中的内容超过了这个，他们就不会排队。

也许试试 width 而不是 min-width？还是更大的最小宽度？

【讨论】：

前奏

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

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