建议 - CSS灵活布局？

Question

我有一个网络应用程序，可以提供有关会议室的一些信息，我的程序实例有不同数量的房间，这些房间的范围从1到大约15个会议室。会议室存储在数据库中。

目前有一个固定的9 x 9网格。

页面必须适合一个32英寸显示器（1080p）

是否可以使用一些CSS代码动态更改布局，以便无论有多少个房间都可以放在一个页面上？

感谢您的帮助，以下现有系统的屏幕截图。

.grid3x3 {
    display:table;
    height:85%; /*Leave some space for the title*/
    width:99%;  /*Should equal div width times number of columns*/
    position:absolute;
    text-align:center;
    top: 100px;
    left:10px;

}
.grid3x3 > div {
    display:table-row;
    width:100%;
}

.grid3x3 > div > div {
    display:table-cell;

}

div {

height:33%;/*Change these to 100% divided by number of rows/columns that you have put in*/
width:33%; /*Change these to 100% divided by number of rows/columns that you have put in*/
}



#footer {
    width: 100%;
    text-align:center;
}

我还没有张贴所有这些，因为它占用了大量的空间，但希望你能得到这张照片..

<div class="grid3x3">
<div>
<div>
<h2> COM Meeting Room  <asp:Label runat="server" id="COMS"></asp:Label></h2>
<asp:Label runat="server" id="COMSMtgs"></asp:Label>
</div>
</div>
</div>

Answer 1

这将使你的网格3 * 3在1080p屏幕上。在较小的屏幕上，房间将以2个柱子和更小的屏幕（宽度小于1280像素）显示1列。

您可以通过更改min-width

来更改每个屏幕尺寸的列数

<强> FIDDLE

CSS：

   .grid3x3 {
        text-align:center;

    }
    .grid3x3 > div {
        float:left;
        min-width:640px;
        width:33%;
    }