Clever Geek Handbook

Dynamic Image / Data Alignment PHP MySQL

Everything is morning

I have an alignment problem.

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

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

Then I want it to dynamically display 3 or 4 of them next to each other before moving on to the next line.

I managed to get it to only work with pictures, not text in between. they are all just displayed on new lines for the time being.

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

+3


source to share


4 answers


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

:

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



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

+1


source


You can float on the left for the image:

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


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

+1


source


It still didn't do what I needed, but I managed to sort it by placing a column:

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


source


I think the problem is with the tag <h3>

- you need to either replace it with <span>

or override the 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 are showing css styles for widget-title

we can help you.

0


source






More articles:


All Articles