html - 如何防止 Ajax 元素换行？

Question

我在 HTML 页面中有一个 div，它通过 Ajax 注入(inject)了 12 个 div。当我调整浏览器窗口大小时，元素或其包含的 div 似乎改变了大小，其中 div 开始以不希望的方式换行。当页面大小为 100% 时，div 对齐方式如下:

|div| |div| |div| |div| |div| |div|
|div| |div| |div| |div| |div| |div|

当我缩小窗口时，div 对齐方式如下:

|div| |div| |div| |div| |div|
|div| |div| |div| |div| |div|
|div| |div|

因此，我试图在调整窗口大小时使 div 保持在第一个位置。我找到了一些解决方案，例如使用 CSS 将包含的 div 设置为固定宽度，并使用属性 white-space: nowrap。

但是这些对我的页面不起作用，似乎 Ajax 是原因。在我的 Ajax PHP 文件中，我创建了每个 div 以在其中包含一个链接和一个表格，如下所示:

    $str = "<div class = 'productdiv'>
                <a class='product' id='$id' title = '$name'>
                    <table id = 'product-table' onmouseover = 'darkenProduct(this);' onmouseout = 'lightenProduct(this);'>
                        <tr>
                            <td>$name</td>
                        </tr>
                        <tr>
                            <td><img src = '$img' /></td>
                        </tr>
                        <tr>
                            <td>$price</td>
                        </tr>
                    </table>
                </a>
            </div>";

这是每个 Ajax 元素和包含的 div“产品”的相关 CSS:

#products
{
    width: 900px;

    margin-left: 2%;
}
/*product table (ID SOURCE FROM PHP -- for each individual product) */
#product-table
{
    float: left;

    width: 138px;
    height: 142px;

    color: #333;
    text-decoration: none;

    border: 1px solid black;
    background-color: #eee;

    /* for rounded borders */
        -moz-border-radius: 25px; /* for firefox */
        border-radius: 25px;
}
#product-table a:link, a:visited
{           
    display: -moz-box; /* for firefox */
    display: block; 

    width: 100%;
    height: 100%;
}
#product-table img
{
    width: 138px;
    height: 142px;
    border: 1px solid black;
}

包含“产品”的 div 嵌套在中心列的较大 div 中。这是它的 CSS:

/* center column */
#center
{
    /* for stretching the center column beyond the window height */
        min-height: 100%;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

...那么，我该如何防止这些 div 换行，我应该采用哪些 CSS 方法？

Answer 1

考虑到容器的宽度设置为 900px...我能看到它们包装的唯一原因是它们实际上并没有像您想象的那样被注入(inject)到容器中，或者可能是您中间的一些其他 css 怪癖专栏

当窗口调整大小时，应添加一个 900 像素宽的滚动条，并且产品表根本不应移动。