Question

HTML“Table”标签允许我们显示具有固定数量的列和行的数据。但是有些情况下列和行的数量应根据浏览器的窗口而有所不同。例如，如果每个单元格占用200 x 100像素，当容器宽度为900时我们可以有4列，但宽度为450时只有2列：

“宽”窗口：

[ 1][ 2][ 3][ 4]
[ 5][ 6][ 7][ 8]
[ 9][10][11][12]

“手机”：

[ 1][ 2]
[ 3][ 4]
[ 5][ 6]
[ 7][ 8]
[ 9][10]
[11][12]

呈现此内容的最佳方法是什么？

在没有javascript的情况下，是否可以使用表格标签进行渲染？或者在div上使用CSS？

Answer 1

如果没有输入使用表或CSS之间的永无止境的参数，对于列数和行数依赖于容器的情况，无javascript解决方案似乎使用DIV。以下方法使用＆＃34; float＆＃34; css属性。

CSS：

.container{
    ...
}
.dynamicTable{
    ...
}
.dynamicTable div{      
    width:200px;
    float:left; 
    ...
}

HTML：

<div class="container">
<div class="dynamicTable">
    <div>item1</div>
    <div>item2</div>
    ...
</div>
</div>