Question

我在HTML页面中有一个div，通过 Ajax 注入了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“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;
}

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

Answer 1

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

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

Answer 2

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

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

如何防止Ajax元素包装？

2 个答案: