Question

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

<?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 } ?>

如何像以前一样加载图像，以便它们显示在行而不是一列中。任何人都可以帮助我吗？

Answer 1

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

根据这一点，应该让它们保持水平。

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

http://jsfiddle.net/u9gSD/

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

1 个答案: