具有灵活高度/宽度的 HTML DIV 表

Question

目前我有一个 HTML 表格，如下所示:

---COLM1---|---COLM2---|---COLM3---

data1         smalldata

data 2

data 3

NEW ROW 1     NEW ROW 2

新的第 1 行在最长内容的正下方显示第一列的新行，但对于第 2 行，我希望它显示在小数据的正下方。

我目前拥有的适用于此示例但不适用于我想要的代码是:

/**-- 3 Column Table  Using Divs
Each Column can be any length
--**/       
.divTable{
width: 100%;
}
.divTableArticle{
display: inline-block;
vertical-align: top;
width: 23%;                     
}

.divTableRow{
clear: left;
padding-top: 15px;
margin-bottom: 10px;
}

和html对应的是:

<div class="divTable">
 <!--AS MANY ROWS-->
       <div class="divTableRow">
           <!---AS MANY ARTICLES--->
           <div class="divTableArticle"></div>
       </div>
</div>

我将如何修改我的代码以满足我的新要求？

因为我目前正在列出每行数据，所以列出每列数据会更好吗？

JS fiddle :Click Here

Answer 1

如果这些文章是独立的，并且无法链接(例如，2012 年和 2007 年作为一对)，我想如果不对它们进行定位(即使用 JS 或 jQuery)是不可能的。但是对于简单化的 HTML 和 CSS，这是我设法得到的最接近的一个(它确实不像你想要的那样工作):

<div class="divTable">
    <div class="divTableArticle"></div><!-- Needed for removing whitespace
 --><div class="divTableArticle"></div>
</div>

.divTableArticle{
    display: inline-block;
    width: 33.3333%;
    float: left;
}

JS Fiddle