javascript - 响应式设计和相同的高度 td

Question

我有一个由 7 个矩形组成的网格。这是我的代码

<div id="insidec">
<table id="insidetabel">    
<col width="32%" />
            <col width="32%" />
            <col width="32%" />                                
 <tr>
 <td><div> 1 </div></td>
 <td><div> 2 </div></td>
 <td><div> 3 </div></td>
  </tr>
 <tr>
 <td><div> 4 </div></td>
 <td><div> 5 </div></td>
 <td><div> 6 </div></td>
  </tr>
 <tr>
 <td><div> </div></td>
 <td><div> 7 </div></td>
 <td><div> </div></td>
  </tr>

</table>
</div>

这是CSS代码-

#insidec{ 
height:100%;
background-color:rgba(0,0,255,0.01);
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
text-align:center;
}
#insidetabel{
height:80%;
width:100%;
border-spacing:10px;
}

 #insidetabel td{
border-radius:10px;
height:32%;
}

@media only screen and (min-width:120px)  { body{font-size:8px} }
@media only screen and (min-width:180px)  { body{font-size:10px} }
@media only screen and (min-width:240px)  { body{font-size:12px} }
@media only screen and (min-width:320px)  { body{font-size:15px} }
@media only screen and (min-width:360px)  { body{font-size:15px} }
@media only screen and (min-width:600px)  { body{font-size:15px} }
@media only screen and (min-width:800px)  { body{font-size:15px} }

这是结果:

现在我有两个问题

1. 如何使所有 td 高度相同。当里面的文字变大时，它会发生变化。
   

2. 我希望它具有响应性 - 当在移动设备中使用时 - 形状会发生变化，它会变成具有两列的网格。
   

我想我已经使用了所有的 css 属性来使高度相同，但它会根据内部文本进行更改(没有溢出隐藏或滚动)。
因为我在 td 中有文本，所以当一个 td 被拉伸(stretch)时，所有 td 都会根据最大的一个进行填充。

请推荐 javascript/jquery 方法。

Answer 1

• 对于响应式问题:

您使用的是表格，因此您无法将其转换为移动设备的 2 列。您需要的是网格布局(参见 bootstrap 网格布局或基础网格)，或者您可以将元素以 33% 的宽度 float 到左侧，并在屏幕宽度变得太小时使用媒体查询设置为 50%，或者当它变得太小时甚至 100%

• 对于高度问题:

我猜文本是动态的，所以您可能需要 JS 解决方案。类似于:(使用 jQuery)

var max_height = 0;
// get the max height
$("span").each(function(i, item){
    if ($(item).height() > max_height){
        max_height = $(item).height();   
    }
});
$("span").height(max_height);

• 这是我为网格使用 Bootstrap 所做的一个基本示例。它以某种方式响应，我可能会给你一个如何做的想法:http://jsfiddle.net/czES7/

希望对你有帮助