如何防止Ajax元素包装？

Posted 2021-04-12

我在html页面中有一个div，它通过Ajax注入了12个div。当我调整浏览器窗口的大小时，元素或它们包含的div似乎会改变大小，其中div开始以不合需要的方式换行。当页面大小为100％时，div对齐如下：

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

当我缩小窗口时，divs对齐如下：

|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“products”嵌套在中心列的较大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;
}

...那么，我怎么能阻止这些divs包装，我应该采取什么样的CSS？

答案

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

当窗口调整大小时，应添加900px宽的滚动条，产品表根本不应移动。

另一答案

您还应将其容器设置为固定宽度。您也可以尝试添加等于宽度的min-width。

编辑：对不起，你应该继续向左浮动他们。