PHP MySQL 图片/数据动态对齐

Question

早上好，

我遇到了一个对齐问题。

我正在使用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>

感谢大家。

- MongoUK

---

这是一个CSS问题。请用输出的HTML替换PHP，然后删除PHP和MySQL标签。 - Sverri M. Olsen

@SverriM.Olsen 虽然说，公告发布者可能并不知道这一点！ - Strawberry

Answer 1

你可以使用float left对图像进行定位：

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

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

- SaidbakR

---

谢谢，那差不多就解决了。 - MongoUK

我的意思是一个包含图像和相关文本的集合，然后是另一个集合等等，横向列出不就是让文本并排显示吗？ - MongoUK

请查看此演示并放置任何您想要的HTML标签：http://jsbin.com/jigotamamu/2/edit - SaidbakR

我已经为 li 设置了 display: inline-block。 - SaidbakR

不好意思，我想让文本垂直堆叠，但同时在右侧放置另一张图片，并将该玩家的详细信息也放到右侧。我已经成功实现了对角线堆叠，我猜想这只是由于换行或类似的原因。 - MongoUK

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

- MongoUK

Answer 3

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

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

你可以将每个个人资料放入一个容器中，并使用内联块以水平方式列出它们。

- sodawillow

---

好吧，那并不能确保每行都有三个。 - Strawberry

是的，我认为楼主的问题主要是关于 CSS 格式化的一般性问题 - 但是尤其是如何同时获取三个连续元素的格式。 - Strawberry

我需要图片旁边的文本，然后将其他带有文本的图片水平排列。 - MongoUK

我编辑了我的答案并更新了链接，以反映您想要的内容 :) - sodawillow

Answer 4

我认为问题出在 <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样式，我们可以帮助您。

- VMAtm