如何並排排列div？

Question

我嘗試了網絡上提供的許多技巧，但都失敗了。 我是學生，不擅長編程。
我需要在第一行的第 5 頁和第二行的另外 5 個 div 中顯示最多 10 個 div。 '浮動：右;' 財產和'明確：無; ' 在 css 中不起作用。 有沒有其他方法可以做到這一點？

這是我的代碼：-

<div  class="center_full">   
 <?php 

 $q= mysql_query("select * from uploads where artist=".$_SESSION['id']." limit $l,10 ");
 while($my_uploads=mysql_fetch_array($q))
  {

  $image=$my_uploads['img_name'];
 $description=$my_uploads['description'];
 $paint_size=$my_uploads['paint_width']." * ".$my_uploads['paint_height'];
 $likes=$my_uploads['vote_up'];
 $price=$my_uploads['price'];


  ?>
  <div id="product_wrapper" >     <!-- _______this is the div, I want to arrange_______ -->


 <table class="boxed_table fixed_product">
 <tr>
 <td>
 <img id="smple_img" src="uploads/<?php echo $image; ?>"  /> 
 </td>
 </tr>
 <tr>
 <td>
 <h5> Description : </h5>
 <br />
 <p><?php echo $description; ?></p>
 </td>
 </tr>
 <tr>
 <td>
 <p> <h5>Size :</h5> <?php echo $paint_size; ?> </p>
 </td>
 </tr>
 <tr>
 <td>
 <h5> <b>Likes : </b> <i> <?php echo $likes; ?> </i> </h5>
 </td>
 </tr>

 <tr>
 <td>
 <a href="editupload.php?id=<?php echo $my_uploads['id']; ?>">Edit Details</a>
 <a name="<?php echo $my_uploads['id'];?>" onClick="deletepr(this.name)" >Delete</a>
 </td>
 </tr>

 </table>

 </div>
  <?php

  }

  ?>


  </div>

Answer 1

對於任何並排的 CSS 排列，您應該首先決定需要對齊多少個元素，每個元素之間的關系是什么，以及跨瀏覽器兼容性意味着多少。

一些解決方案如下，假設布局為

<div class='outer'><div></div><div></div><div></div><div></div><div></div></div>
<div class='outer'><div></div><div></div><div></div><div></div><div></div></div> 

1. 浮動：對。 ( http://dl.dropboxusercontent.com/u/4374976/css.html )
   <style>.outer>div{float:right}</style>
2. Display:inline 或 display:inline-block;
   <style>.outer > div {display:inline-block}</style>
   這可能是最簡單的解決方案。
   inline-block 允許您設置寬度。
3. 顯示：表格單元格。
   這模仿了一張桌子，它可能是也可能不是您需要的。 這是迄今為止唯一可以對齊兩行上的單元格的解決方案，但它的瀏覽器支持不太完善。
4. display:flex ( http://css-tricks.com/snippets/css/a-guide-to-flexbox/ )
   這是最復雜但最強大的解決方案。 除了版本 10 之前的 IE，它在任何地方都得到支持。它被認為是新標准，並被推薦使用。

Answer 2

我認為您正在尋找 CSS 屬性顯示。 （就像 SamGoody 也建議的那樣）

display: inline-block;

當給定固定寬度時，您可以輕松對齊它們。

檢查我快速設置的這個例子： http : //jsfiddle.net/epicsoftworks/p7mZC/1/

您可能還想檢查引導程序，因為該框架在遵循其規則時會自動處理幾乎大多數情況。 http://getbootstrap.com/