我在这里和其他地方搜索过这个问题的解决方案，但我尝试过的任何工作都没有。 googleplex充满了样本，但许多似乎不符合我的需求或严重依赖我无法理解的技巧。
基本上，我正在尝试创建一个仪表板。当我无法解决问题时，我放弃了.css。我有3排。每行的列数最多为3，一行为2/3和1/3，另一行为50/50（顶行为1 / 3,1 / 3和1/3）。当我无法得到.css使列均匀（第三个1/3向下移动，或从行的其余部分偏离中心）时，我切换到。
当仪表板中的瓷砖内容有限时，我能够使列/行均匀分布（使用宽度/高度：33.3％）。如果我调整了浏览器的大小，那么瓷砖会缩小到某个点（如预期的那样），如果窗口最小化到左/右，只有一些瓷砖出现。不太好 - 我希望即使内容消失，我也可以最小化左/右，因为浏览器会让我看到3个相等的列|| || ||像那样。但好吧，没什么大不了的。
好吧，我把内容放在左下方的图块（3x3图块网格）中，当然它已经扩展了。现在我尝试了所有东西（边框折叠，白色空间，溢出：隐藏等），仍然无法按照我想要的方式获得它。
我很难过。我知道在某个时刻浏览器会强制事情溢出（让我们随意说这应该发生在800x600），但是我希望我的显示器能够适当收缩（瓦片变得相等）并且瓦片里面的滚动条会显示在y轴上（溢出-y），以便用户可以滚动文本。我甚至尝试了800x600最小/最大宽度/高度，但我无法让它工作。
任何建议都将受到赞赏。
这是我的html代码段：
<div id="dashboard">
<table cellpadding="0" cellspacing="10">
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
</table>
</div>
这是我的.css：
#dashboard { height: 100%; }
#dashboard table { height: 100%; width: 100%; border:0; margin: 0px; padding: 0; }
#dashboard table tr { height: 33.3%; }
#dashboard table td { vertical-align: top; height: 33.3%; min-width: 33.3%; min-height: 33.3%; max-width: 33.3%; max-height: 33.3%; overflow: hidden; }
#dashboard table td.onethird { width: 33.3%; }
.dashboard-tile { background-color: #650000; border: 1px solid #790000; }
.dashboard-tile .half {}
.dashboard-tile .twothird {}
.dashboard-tile .full {}
.dashboard-tile .content { margin: 5px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; color:#fff; }
.dashboard-tile header { font-size: 1.3em; font-weight:bold; width:100%; float:left; padding: 0px 0px 5px 0px; }
.dashboard-tile header span { float: left; text-transform: uppercase; }
.dashboard-tile section { margin-top:35px; }
.dashboard-tile footer{ }
.dashboard-tile footer span { font-weight:bold; }
答案 0 :(得分：2)
目前还不清楚你想要什么，但无论如何我都会尝试回答。
使用三分之一和一半制作流体设计相当简单。
li{ width:33%; float:left;}
或者，
li{ width:50%; float:left;}
此外，在小屏幕上，将文本分成三列并不是理想的可读性。考虑使用这样的媒体查询：
@media screen and (max-width:600px){
li{width:100%}
}
简化小屏幕的布局。
以上是an example上述概念。
修改
这是一个略有不同且简化的解决方案：
html{height:100%;}
body{height:100%;}
div{width:33.333333%; height:33.333333%; float:left; overflow:auto;}
.twothirds{width:66.666666%;}
.half{width:50%;}