PHP MySQL 图片/数据动态对齐

Posted 2023-03-05

【中文标题】PHP MySQL 图片/数据动态对齐

【英文标题】：PHP MySQL Picture/Data Dynamic Alignment

【发布时间】：2015-02-28 02:29:25

【问题描述】：

早上好，

我遇到了对齐问题。

我正在使用 mysql 数组来创建运动资料页面。

我希望它显示图像，然后在右侧显示他们的姓名、位置和编号。

然后我希望它在切换到下一行之前动态显示其中的 3 或 4 个。

我设法让它只处理图片，而不是中间的文字。它们目前都只显示在新行上。

<style>
   #container .profile
               display: inline-block;
               vertical-align:top;
                      
</style>
<div class="profile">
<img src="wp-content/uploads/profile/jh7.jpg"  /><br />
<h3 class="widget-title">Player 1</h3>
<p>Defence</br>#7</br></br>
<img src="wp-content/uploads/profile/dw21.jpg"  /><br />
<h3 class="widget-title">Player 2</h3>
<p>Defence</br>#21</br></br>
<img src="wp-content/uploads/profile/pn22.jpg"  /><br /> 
<h3 class="widget-title">Player 3</h3>
<p>Defence</br>#22</br></br>
</div>
                </div><!-- .entry-content -->


</div>

谢谢大家

【问题讨论】：

这是一个 CSS 问题。请将 php 替换为输出的 html，然后去掉 PHP 和 MySQL 标签。

@SverriM.Olsen 虽然，公平地说，OP 可能不知道这一点！

【参考方案1】：

它仍然没有完全符合我的要求，但是我设法通过在其中放置一列来对其进行排序：

<style> 
.profile img 
      float: left; 
      margin-right: 10px; 
      margin-top: 2px;  
.profile h3  display: inline-block;  
.profile pos  
.column-left float: left; width: 33%;  
</style> 

【参考方案2】：

快速示例：浮动图像并使用具有clear: both 属性的块元素清除浮动：

http://jsfiddle.net/L8jtwkw1/2/

您可以将每个配置文件包装在一个容器中，然后使用内联块将它们水平列出。

【讨论】：

嗯，这并不能准确地将三个排成一行

是的，我认为 OP 的问题一般是关于 css 格式 - 但是，特别是连续三个。

我需要图片旁边的文字，然后是其他带文字的图片，水平排列

用更新的链接编辑了我的答案以反映您想要的内容：)

【参考方案3】：

图片可以使用左浮动：

<style>
    .profile img
        float: left;
          margin-right: 5px;
        
  </style>

查看此演示：http://jsbin.com/jigotamamu/1/

【讨论】：

谢谢你，这几乎破解了它。

我现在可以根据需要在图片旁边添加文字。我可以得到它，以便一行中有 3 个或 4 个，而不是每行 1 个吗？喜欢页面上的列？

当然，将它们列在列表中并水平设置样式！即从您的初始代码中，将<br /> 替换为<ul><li>Number</li><li>another</li>...</ul>

我的意思是包含一组图像和相关文本，然后是另一组等，不会水平列出只是让文本并排显示吗？

查看此演示并放置您想要的任何 html 标签：jsbin.com/jigotamamu/2/edit

【参考方案4】：

我认为问题出在 <h3> 标记中 - 您需要将其替换为 <span> 或覆盖它的样式。

例如：

echo '<img src="wp-content/uploads/profile/'.$row['Id'].'.jpg"  />',
   '<span class="widget-title">'.$row['FirstName'].' '.$row['Surname'].'</span>',
    $row['PositionLong'].'</br>',
   '#'.$row['Number'].'</br>';

如果您显示 widget-title 的 css 样式，我们可以为您提供帮助。