PHP MySQL图片/数据动态对齐

早上好

我有一个对齐问题

我正在使用MYSQL数组创建一个体育个人资料页面

我想让它显示图像，然后在右边，显示他们的名字，位置和号码在彼此下面

然后，我希望在切换到下一行之前，动态地将其中的3或4个相邻显示

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

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


</div>

#容器配置文件{
显示：内联块；
垂直对齐：顶部；
}


玩家1
防御
#7




玩家2
防卫




玩家3
防卫

---

谢谢大家

快速示例：浮动图像并使用块元素清除浮动，块元素具有

清除：两者

属性：

---

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

我认为问题在于

标记-您需要将其替换为

或覆盖其样式

例如：

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

echo'，
“.$row['FirstName'..”.$row['names'..”，
$row['PositionLong'].
'，
“#”。$row['Number']”。
；

---

如果您显示

小部件标题的css样式，我们可以帮助您。
您可以对图像使用float left：

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


.个人资料{
浮动：左；
右边距：5px；
}    

签出此演示：
它仍然没有完全按照我的要求进行操作，但是我通过在以下内容中添加一列来对其进行排序：

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


.profile img{
浮动：左；
右边距：10px；
页边距顶部：2px；}
.profile h3{显示：内联块；}
.profile pos{}
.column left{float:left；width:33%；}
这是一个CSS问题。请用输出的HTML替换PHP，然后删除PHP和MySQL标记。@SverriM.Olsen尽管，公平地说，OP可能不知道这一点！好吧，这并不是说三成一行是的，我认为OP的问题是关于css格式的一般性-但是，特别是三成一行。我需要图片旁边的文本，然后是其他带文本的图片，水平排列。用更新的链接编辑我的答案，以反映你想要的：）谢谢，这几乎破解了它。我现在有文本旁边的图片需要。我可以得到这样的结果，即一行中有3或4个，而不是每行1个？喜欢页面上的列吗？当然，请将它们列在列表中并水平设置样式！i、 e从您的初始代码开始，将

替换为
数字
另一个
。
我的意思是包含一组图像和相关文本，然后是另一组等，不会水平列出，只是让文本并排排列？请签出此演示并放置您想要的任何html标记：