如何防止包裝中的Ajax元素？

我有一個div頁面，通過Ajax注入12個div。當我調整瀏覽器窗口的大小時，元素或它們包含的div似乎會改變大小，其中div開始以不希望的方式包裝。當頁面大小爲100％時，div對齊如下：

| div | |格| |格| |格| |格| |格|
| div | |格| |格| |格| |格| |格|

當我縮小窗口時，div對齊如下：

| div | |格| |格| |格| |格|
| div | |格| |格| |格| |格|
| div | |格|

所以，我試圖讓窗口調整大小時保持第一個位置。谷歌搜索這個，我發現像使用CSS設置包含固定寬度的div，並使用屬性white-space: nowrap ...這些不適用於我的網頁，似乎是阿賈克斯是原因。在我PHP文件阿賈克斯，我創建的每個div來有一個鏈接和一張桌子裏面，像這樣：

如何防止包裝中的Ajax元素？

$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>";<br /><br />

下面是每個阿賈克斯元素相關的CSS，並且包含div「產品「：

#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; 
}<br /><br />

內含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; 
}<br /><br />

...所以，我怎麼可能會阻止包裝這些div，我應該採取什麼樣的CSS的方法？

來源

2012-04-23 Ian Campbell

感謝您的幫助球員。我試圖在我的PHP文件的行之間插入'

'，但它沒有效果。然而，對於每個div的表格，「text-align：center」和「width：900px」的指定寬度爲每個div的表格顯示：inline-block，每個div表格的高度和寬度較大，修復了所有重疊問題，並且div現在按照指定的寬度進行包裝。當我調整窗口的大小時，這一切都很好！ – 2012-04-23 03:27:02

您還應該將其容器設置爲固定寬度。您也可以嘗試添加一個等於寬度的min-width。

編輯：對不起，你應該繼續把它們左移。

來源

2012-04-23 01:28:57 msigman

他們需要漂浮，或者他們只是垂直堆放，但是容器應該是固定的（據說是） – 2012-04-23 01:33:38

嗯，所以我只是試圖不'浮動：左'，他們根本不包裹 - 它們是垂直對齊的。 'float：left'非常接近我想要做的事情，但是有了錯誤 - 我做**想讓它們包裝，我只希望它們保留爲2行6個div，如果可能的話。 – 2012-04-23 01:35:24

你說得對。我已經更新了我的答案。嘗試向父容器添加最小寬度屬性。 – msigman 2012-04-23 01:42:32

考慮到容器的設置寬度爲900px ...我能看到它們包裝的唯一原因是由於它們實際上並沒有像你認爲的那樣被注入到容器中，或者可能是其他一些css與你的詭計中間列

當窗口調整大小時，應該在900px寬的範圍內添加滾動條，並且產品表不應該移動。

來源

2012-04-23 01:33:20

在我的中心列中，我有'margin-left：auto'和'margin-right：auto'，會阻止滾動條嗎？否則，爲了讓事情變得複雜起來，我只是在奇思妙想中爲每個元素的表添加了一個CSS屬性 - 「display：inline-block」，就在'float：left'之下。這現在保持divs像我想要的那樣排列成6行的2行！除了兩行彼此重疊，導致每個div的內容的對齊誤差... – 2012-04-23 01:48:20

margin：0 auto;通常用於水平居中元素，它不應該影響滾動條是否顯示。您可以嘗試在兩行之間放置一個

以清除它們的高度，這可能有效 – 2012-04-23 01:56:00

如何防止包裝中的Ajax元素？

回答

相關問題