排列在多元格div

Question

我有這個div顯示電子商務網站的產品。

我已經很好地與css和一個表裏面，但使用表的內容似乎是皺眉/不是最好的，所以我試圖做到這一點，至今沒有成功。該產品div看起來是這樣的：

原油未經編輯截圖：http://img255.imageshack.us/img255/6832/printt.png

這就是我想要的效果。我嘗試在產品div中嵌套2個div，其中一個與圖像，標題和說明一起浮動，另一個與表格元素一起右移。

以爲我在某些頁面上看起來很體面，但在其他頁面上（顯示其他產品），它看起來不同並且搞砸了。我認爲這是由於鏈接對整個產品div的寬度的影響，最終導致了正確的div。

我該如何阻止這種行爲，我希望鏈接環繞文本，否則問題就會消失。或者你還在建議其他東西？

HTML看起來像這樣：

<div id="products"> 
     <a href="detalii.php?id_produs=4"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></a> 
     <a href="detalii.php?id_produs=4"><h3>PRC200</h3></a> 
     <table border="0"> 
     <tr> 
      <td><h4>100,00 RON</h4></td> 
     </tr> 

     <tr> 

      <td class="out">Indisponibil</td> 
     </tr> 

     <form action="" method="post"> 
     <tr> 
      <td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td> 
     </tr> 
     </form> 
     <form action="detalii.php" method="get"> 

     <tr> 
      <td> 
      <input type="hidden" name="id_produs" value="4" /> 
      <input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" /> 
      </td> 
     </tr> 
     </form> 
     </table> 
     <a href="detalii.php?id_produs=4"><p>M-am saturat de atatea litere si numere</p></a>  
     </div> 

Answer 1

這裏是無表的解決方案。請記住將標籤放置在外部CSS文件中。通過使用無表格結構，您會看到代碼的濃縮程度。

<style> 
.product { border:1px solid red; padding:10px; } 
.productimg { float:left; padding-right:15px; } 
.purchasedetails { float:right; padding-left:15px; } 

</style>   
<div id="products"> 
    <div class="product">   
     <div class="purchasedetails"> 
      <h4>100,00 RON</h4> 
      <p>Indisponibil</p> 
      <input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br /> 
      <input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" /> 
     </div> 

     <div class="productimg"><a href="#"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></a></div> 

     <h3><a href="#">PRC200</a></h3> 
     <p class="description">Insert Description Here</p> 
     <div style="clear:both;"></div> 

    </div> 
</div> 

我只有這個nexted的<div id="products">內，因爲它是在你的代碼上市。內部產品div會essentailly填充任何內容區域它是否是一個<td>或<div>