早上全部，
我遇到了对齐问题。
我正在使用 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>
谢谢大家
您可以使用左
浮动作为图像：
<style>
.profile img{
float: left;
margin-right: 5px;
}
</style>
查看此演示：http://jsbin.com/jigotamamu/1/
快速示例：浮动图像并使用具有clear: both属性的块元素清除浮点数：
http://jsfiddle.net/L8jtwkw1/2/
您可以将每个配置文件包装在一个容器中，然后使用内联块水平列出它们。
它仍然没有完全达到我所追求的效果，但是我设法通过放入一列对其进行排序：
<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>
我认为问题出在<h3>标签中 - 您需要将其替换为<span>或覆盖它的样式。
例如：
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>';
如果您显示 widget-title 的 css 样式，我们可以为您提供帮助。