Question

上午，

我正在创建一个个人资料页面，我希望彼此相邻显示缩略图，并在按钮点击时弹出包含信息的叠加层。除了缩略图pics显示在一个单独的行中，我可以得到一切工作，而我希望它们并排。

如果没有叠加层的代码，它们会彼此相邻显示，但叠加层无法正常工作。目前正处于捕获中......

任何指针？

由于

<?php
  $result = mysql_query("SELECT * FROM People ORDER BY Position,Number");
  while($row = mysql_fetch_assoc($result)){
      echo '<div class="box" ><div id="triggers">',
           '<img src="profile/'.$row['Id'].'.jpg" rel="#mies'.$row['Id'].'"/>',
           '</div>',
           '<div class="simple_overlay" id="mies'.$row['Id'].'" align="center">',
           '<div class="details">',
           '<img src="profile/'.$row['Id'].'l.jpg" />',
           'Name: <b>'.$row['FirstName'].' '.$row['Surname'].'</b></br>',
           'Position: <b>'.$row['Position'].'</b> Number: <b>'.$row['Number'].'</b></br>',
           'Years With Saxons: <b>'.$row['YrsWithSaxons'].'</b></br>',
           'Previous Teams: <b>'.$row['PreviousTeams'].'</b></br>',
           'Favourite NFL Team: <b>'.$row['NFLTeam'].'</b></br>',
           'Favourite NCAA Team: <b>'.$row['NCAATeam'].'</b></br>',

           '</div></div>';
    }
?>

Answer 1

您希望浮动.box元素，或将它们设置为显示为内联块。

display: inline-block;

或

float: left;

Answer 2

您可能会为“box”元素的css添加一些样式。添加“float：left;”并且可能是'margin-right：10px;'如果你愿意，可以将它们分开。请务必在html的最后一个框后面加<div style="clear:both"></div>。

显示缩略图彼此相邻而不是MYSQL / PHP

2 个答案: