-2

我创建了一个表格来显示购物车。我的前两行完美对齐，但最后一行没有。我尝试重新创建它，但仍然无法弄清楚我做错了什么。有任何想法吗？

为了使其更具可读性，我取出了前两行，只留下了导致问题的最后一行。：

CSS

     .gallery-list
     {   
     }
     .gallery-list .container
    { 
        clear:both;
        width:100%;
        padding-top:10px; 
        padding-bottom:10px; 
    } 
    .gallery-list .container .imgContainer
    {
        width:25%;
        float:left;
        padding-top:5px;
    }
    .gallery-list .container  .imgContainer img
    {
        width:98%; 
    }
    .gallery-list .container .descContainer
    {
        width:74%;
        float:left;
        padding-left:5px;
    }

    .gallery-grid
    {

    }
    .gallery-grid .container
    {  
        width:33%;
        padding-top:10px; 
        padding-bottom:10px; 
        float:left;
    } 
    .gallery-grid .container .imgContainer
    {

    }
    .gallery-grid .container .imgContainer img
    {
        width:98%; 
    }
    .gallery-grid .container .descContainer
    {
        display: none;
    }

    ul.pager
    {
        list-style-type: none;
        margin:0px;
    padding:0px;
    }
    .pager li {display: inline; }
    .pager li a {padding:5px; border:solid 1px #ccc;margin:2px;}
    .current
    {
        color:black;

    }
    .current:hover
    {
        text-decoration:none;
    }
    #pager
    {
        clear:both;
    }

html

     <tr>
            <td>
            <div class="gallery-list"> 



        <div class="container">
            <div class="imgContainer">

                <img  src=""/>
            </div>
            <div class="descContainer">
                <div class="name">
                    <h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Single)</h2>
                </div>
                <div class="desc">
                                    </div>
                <div class="shortcode">
                     <object class="simpleecommcartAddToCartButton">




     <form id='cartButtonForm_1' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
     <input type='hidden' name='task' id="task_1" value='addToCart' />
     <input type='hidden' name='simpleecommcartItemId' value='1' />

     <input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />




      <span style="color:#666;font-size:1.1em;"><em></em></span>

      <span style="font-weight:bold;font-size:1.01em;">Price: $89.00</span>


           <input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">       




                 <br><input type='submit' value='Add To Cart' name='addToCart_1' id='addToCart_1' />





          <input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
      <div id="stock_message_box_1" class="SimpleEcommCartUnavailable" style="display: none;">
        <h2>We're Sorry</h2>
        <p id="stock_message_1"></p>
        <input type="button" name="close" value="Ok" id="close" class="modalClose" />
      </div>

     </form>



     </object>
                </div>
            </div>
        </div> 
            </td>
            <td>
      <div class="container">
      <div class="imgContainer">             
      <img  src=""/>
      </div>
      <div class="descContainer">
      <div class="name">
      <h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Couple)</h2>
      </div>            
     <div class="desc">
                                    </div>
                <div class="shortcode">
                     <object class="simpleecommcartAddToCartButton">

      <form id='cartButtonForm_2' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
      <input type='hidden' name='task' id="task_2" value='addToCart' />
      <input type='hidden' name='simpleecommcartItemId' value='2' />

      <input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />

      <span style="color:#666;font-size:1.1em;"><em></em></span>

      <span style="font-weight:bold;font-size:1.01em;">Price: $129.00</span>

           <input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">                 

                 <br><input type='submit' value='Add To Cart' name='addToCart_2' id='addToCart_2' />       
          <input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
      <div id="stock_message_box_2" class="SimpleEcommCartUnavailable" style="display: none;">
        <h2>We're Sorry</h2>
        <p id="stock_message_2"></p>
        <input type="button" name="close" value="Ok" id="close" class="modalClose" />
      </div>

  </form>
</object>
                </div>
            </div>
        </div>          
            </td>
        </tr>
     </table>
4

1 回答 1

1

如果您检查页面的来源，您已经关闭并重新打开了tr最后一列之前的列，这导致最后两列像这样被拆分

查看发布的代码后没有任何问题，并且运行良好：

http://jsfiddle.net/9pPXq/

于 2013-04-30T14:07:08.457 回答