0

目前我有一个 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 小提琴：点击这里

4

1 回答 1

2

如果这些文章是独立的，并且无法链接（例如，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小提琴

于 2013-04-03T10:08:29.807 回答