响应式设计和相同的高度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被拉伸时，所有的td都会根据最大的td得到填充。

请建议javascript/jquery方法。

Answer 1

试试这个：

#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; 
    min-width:220px 
} 

#insidetabel td{ 
border-radius:10px; 
height:32%; 
    min-width:100px; 
    display:inline-block; 
} 

http://jsfiddle.net/5aUwZ/

Answer 2

• 对于敏感问题：

您使用的是表，所以你将不能够转变成2本移动列。您需要的是一个网格布局（比较引导网格布局或基础网格），或者您可以将元素向左浮动33％的宽度，并在屏幕宽度变得太小时使用媒体查询设置为50％，或者当它变得太小

• 对于身高问题，甚至100％：

我想，文字是动态的，所以你probablly需要一个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); 

• 这是我没有使用引导网格一个基本的例子。这在某种程度上反应，我可能会给你一个想法如何做到这一点：http://jsfiddle.net/czES7/

希望这有助于