响应式设计和相同的高度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都会根据最大的一个获得填充。

请建议使用javascript / jquery方法。

Answer 1

• 对于响应问题：

您正在使用表格，因此您无法将其转换为2列移动设备。您需要的是网格布局（参见引导网格布局或基础网格），或者您可以将元素向左浮动，宽度为33％，并在屏幕宽度变得太小时使用媒体查询设置为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/

希望这有帮助

Answer 2

试试这个：

#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/