PHP MySQL图片/数据动态对齐

Morning all,

早上,

I'm having an alignment issue.

我有对齐问题。

I am using a MYSQL array to create a sports profile page.

我正在使用一个MYSQL数组来创建一个sports profile页面。

I want it to display the image, then to the right, show their name, position and number below each other.

我想让它显示图像，然后向右，显示它们的名字，位置和下面的数字。

Then i want it to dynamically display 3 or 4 of these next to each other before swapping down to the next line.

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

I have managed to get it to work with just the pictures, not with the text in between. they all just show on new lines currently.

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

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

Thanks guys

谢谢大家

4 个解决方案

#1

You can use float left for the image:

您可以使用浮动左侧的图像:

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

Checkout this DEMO: http://jsbin.com/jigotamamu/1/

检查这个演示:http://jsbin.com/jigotamamu/1/

#2

Quick example : float the images and clear the float with a block element having a clear: both property :

快速例子:浮动图像和清除浮动的块元素有一个明确的:两个属性:

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

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

You can wrap each profile in a container and use inline block to list them horizontally then.

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

#3

It still didn't do exactly what I was after, However I managed to sort it by putting a column in:

它仍然没有做我想要的，但是我通过在里面放一篇专栏文章来分类:

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

#4

I think that thie problem is in <h3> tag - you need either replace it with <span> or override styles for it.

我认为这个问题出现在

标签中——您需要用或者覆盖样式替换它。

For example:

例如:

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

If you show the css styles for widget-title, we can help you.

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