0

Ajax経由で 12 個の div が挿入された HTML ページに 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;
}

...では、これらdivの s がラップされないようにするにはどうすればよいでしょうか?どのような CSS アプローチを採用すればよいでしょうか?

4

2 に答える 2

0

また、コンテナーを固定幅に設定する必要があります。min-width幅に等しいを追加することもできます。

編集：申し訳ありませんが、それらを左にフロートし続ける必要があります。

于 2012-04-23T01:28:57.430 に答える
0

コンテナの幅が 900px に設定されていることを考えると...それらがラッピングされているのを見ることができた唯一の理由は、実際にはコンテナに注入されていないためです。

ウィンドウのサイズが変更されると、幅 900 ピクセルのスクロールバーが追加され、製品テーブルはまったく移動しないようにする必要があります。

于 2012-04-23T01:33:20.007 に答える