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

【问题标题】：HTML DIV Table With Flexible Height/Width具有灵活高度/宽度的 HTML DIV 表
【发布时间】：2017-12-16 18:42:14
【问题描述】：

目前我有一个 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 小提琴：Click Here

【问题讨论】：

使用自动换行：break-word；属性所以大数据将被发送到下一行不要忘记先设置一些宽度
尝试了你的建议：jsfiddle.net/C7jZTDoenst 似乎有任何影响
在您的 JS Fiddle 示例中，您想让新行与哪个 smallData 对齐？那row 2是什么？
小数据是文章，我希望能够让每一列中的每一行都相互排列。目前，如果 Row1 Col1 一个很长（高度），Row2Col1 和 Row2Col2 从 Row2Col1 应该在它下面的相同位置开始，并且 Row2Col2 应该更高
@LmC 所以，在您的 JS Fiddle 示例中，您希望 2008 年在它所在的位置，但 2007 年略低于 2012 年，2006 年略低于 2011 年？

标签： html css css-tables fluid-layout

【解决方案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

【讨论】：