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

目前，我有一个HTML表看起来像：HTML DIV表具有灵活的高度/宽度

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

来源

2013-04-03 LmC

使用自动换行：打破字;财产如此大的数据将被发送到下一行不要忘记先设置一些宽度 – user1370510

尝试你的建议：http://jsfiddle.net/C7jZT/ Doenst似乎有任何影响 – LmC

在你的JS Fiddle例子中，那是什么'smallData'你想让你的新行对齐？那么'第2行'是什么？ – micadelli

如果这些文章都是独立的，无法链接（如2012年和2007年作为一对）。我想这是不可能的，而不将它们定位（即使用JS或jQuery的）。但对于simplyfied 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

来源

2013-04-03 10:08:29 micadelli

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

回答

相关问题