在 HTML 中自动对齐表格以填充行答案

【问题标题】：Auto align tables in HTML to fill the rows在 HTML 中自动对齐表格以填充行
【发布时间】：2013-11-21 03:33:58
【问题描述】：

我正在努力在单个页面中显示组的成员。该页面将始终显示在信息亭 (1920x1080) 中，并且我已经有了漂亮的深色背景。

为了代表每个成员，我想为 300x150 像素创建一个表格或 div 框。在任何情况下，成员总数都不超过 25（可能更少）。所以我现在想以某种方式在屏幕上呈现这些框，使它们看起来像这样（这只是一个示例，实际上我认为每行可以有 6 个框）：

我正在绞尽脑汁想弄清楚如何自动布局这些框，但到目前为止还没有成功。这是我的 CSS 和 HTML 代码（别介意聪明的部分）。如果您能帮助我实现这一点，那就太好了！）

<style type="text/css">
    body{
    background-color: black;
    background-image:url('{$smarty.const.SITE_URL}/core/templates/default/public/bg/{$bgNumber}.jpg');
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;         
    }   

    .public_h3{
        color: white;
        font-weight: 800;
    }         

    .MAIN_TABLE{
    width: 1800px;
    height: auto;
    padding: 0;
    margin: 0;
    background-color:white;
    }

</style>

<body>
    <center>
        <h3 class="public_h3">My Members</h3>
        <table class="MAIN_TABLE">
            <tr>
                <td> 
                    {foreach name='members' from=$members item=m}
                    <div style="float: left; width:300px; text-align: top;">
                        <table width="100%"  style="padding: 0px">
                            <tr>
                                <td width="100px" >
                                    <img src="{$smarty.const.MEMBERS_IMAGE_URL}/{$m.photo}" width="100" height="100" />
                                </td>
                                <td width="200px" valign="top">
                                    <center><span style="margin: 0; padding: 0" class="member_name">{$m.name}</span></center>
                                    Room: {$m.room}
                                    {$m.rollcall}
                                </td>                             
                            </tr>
                        </table>   
                    </div>
                    {/foreach} 
                </td>
            </tr>
        </table>
    </center>    
</body>

【问题讨论】：

A) 不要使用 <center> 标签和 2) 发布呈现的 HTML，而不是任何语言或模板。

标签： javascript css html html-table

【解决方案1】：

不要为此使用表格（请！）。只需浮动一些div，它们就会自动流到下一行

div {
    width: 300px;
    height: 150px;
    border: 10px solid #FFF;
    margin: 10px;
    float: left;
}

DEMO

【讨论】：