Question

我在网上尝试了很多提示，但都失败了。我是学生，不擅长编程我需要在第1行的第5页中显示最多10个div，在第2行中显示另外5个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>

浮动：右。（http://dl.dropboxusercontent.com/u/4374976/css.html）
<style>.outer>div{float:right}</style>
显示：内联或显示：内联块;
<style>.outer > div {display:inline-block}</style>
这可能是最简单的解决方案 inline-block允许您设置宽度。
显示：表小区
。这会模仿一张桌子，这可能是您需要的，也可能不是。到目前为止，这是解决两行中单元格的唯一解决方案，但它的浏览器支持不太完美。
display：flex（http://css-tricks.com/snippets/css/a-guide-to-flexbox/）
这是最复杂但功能最强大的解决方案。它支持IE在版本10之前的所有地方。它被认为是新标准，并被推荐。

Answer 2

我认为您正在寻找CSS属性显示。（像SamGoody也建议的那样）

display: inline-block;

当给定固定宽度时，您可以轻松对齐它们。

检查此示例我快速设置： http://jsfiddle.net/epicsoftworks/p7mZC/1/

您可能还想检查引导程序，因为此框架在遵循其规则时会自动处理大多数情况。 http://getbootstrap.com/

如何并排安排div？

2 个答案: