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表具有靈活的高度/寬度

回答

相關問題