0

我在一个 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 “产品” 嵌套在中心列的较大 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 方法？

4

2 回答 2

0

您还应该将它们的容器设置为固定宽度。您也可以尝试添加一个min-width等于宽度的值。

编辑：抱歉，您应该继续将它们向左浮动。

于 2012-04-23T01:28:57.430 回答
0

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

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

于 2012-04-23T01:33:20.007 回答