目前我有一个 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 fiddle :Click Here
最佳答案
如果这些文章是独立的,并且无法链接(例如,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;
}
关于具有灵活高度/宽度的 HTML DIV 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15782461/