如何避免图像在一列中显示答案

【问题标题】：How to avoid images being displayed in one column如何避免图像在一列中显示
【发布时间】：2014-04-01 17:28:15
【问题描述】：

我正在开发一个图库网站，用户可以在其中访问其他人共享的图像。我已经创建了图库，可以使用缩略图查看图像，并且可以从上一个图像的右侧上传图像。如果图像位于页面边缘，则下一个图像将位于其下方的行中。我使用此代码来执行此操作：

<?php
        mysql_connect("localhost","root","");
        mysql_select_db("pardeepsandhu");

        $res= mysql_query("select * from images");
        $row=mysql_fetch_array($res)
?>
<div id="w">
  <div id="content">
      <div id="images"><?php while ($row=mysql_fetch_array($res)){?>
        <a href="<?php echo $row["Image"]; ?>"><img src="<?php echo $row["Image"]; ?>" height="134.1175" width="134.1175" border="5" alt="turntable" /></a>
<?php } ?>
</div>
  </div>
</div>
<script type="text/javascript">
$(function() {
    $('#images a').lightBox();
});
</script>

但是，我现在正在尝试建立一个投票系统。在每张图片的底部都会有一个按钮，可以为图片点赞。该按钮可以工作，但是带有按钮的图像的布局方式不同。所有图像都出现在另一个之下，看起来它们在列中。我不希望这种情况发生，因为空间会被浪费。这是带有按钮的代码：

<div id="w">
  <div id="content">
      <div id="images"><?php while ($row=mysql_fetch_array($res)){?>
        <a href="<?php echo $row["Image"]; ?>"><img src="<?php echo $row["Image"]; ?>" height="134.1175" width="134.1175" border="5" alt="turntable" /></a>
        <form id="form1" name="form1" method="post" action="">

          <input type="submit" name="button" id="button" value="Like this image" />
        </form>

<?php } ?>

如何让图像像以前一样加载，以便它们出现在行中而不是在一列中。谁能帮帮我？

【问题讨论】：

对于第二个代码块，能否请您发布所有结束</div>s

标签： php jquery mysql image voting

【解决方案1】：

要实现水平布局，您需要使用 css "display:inline-block;"在您的所有图像/链接容器上。如果我是你，我会有另一个包含所有图像和投票信息的 div。另外，请确保关闭所有 div，因为这会极大地改变您的布局。

类似的东西应该让它们水平。

<div id="pic" style="display: inline-block;">
<a href=""><img src=""></a>
<form></form>
</div>

http://jsfiddle.net/u9gSD/

【讨论】：