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小提琴：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

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

1 个答案: