How can I display two images horizontally? - php

Question

I have a problem and needed an answer. How can I automatically put the 2 images horizontally.
I think I will use some if(1 ==%3)?
In the example pic I really like to horizontal the 2 images don't know how to do it ?
Here's what I've done:
for($i=0; $rows = $results->fetch(); $i++){
if($dsds=='Commissoner'){
echo $rows['prog_id'].$rows['prog_id'].' '.$rows['prog_name'].' = '.$rows['votes'];
}else {
//this is the part where I put a css
style='margin-left:44px;'><div class='box_img2' style='margin-right:10px;' >";
echo '<img src="candidates/images/'.$rows['image'].'" width="70" height="80px" />'.', '.'<br>'.$rows['lastname'].', '.$rows['firstname'].'<br>'.' = '.$rows['votes'];
echo '<br>';
}
$sdsd=$dsada
?>
<img src="candidates/images/percent.gif"width='<?php echo(100*round($rows['votes']/($sdsd),2)); ?>'height='10'>
<?php
if ($rows['votes']==0){
echo "<br>";}
else {
echo(100*round($rows['votes']/($sdsd),2)); ?>%<br>
<?php
}
echo '</div>';
}
?>
Here's my css:
.row:before, .row:after { clear:both; }
.row{
display: block;
}
.box_img2 {
float: left;
/*margin-right:85px;*/
text-align:center;
}
.box_img2 img { /* if you want it centered */
display:block;
display: inline-block;
}
Here's my entire codes:
<?php
include('../connection/connect.php');
$result = $db->prepare("SELECT * FROM candposition ORDER BY posid ASC");
$result->bindParam(':userid', $res);
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
$dsds=$row['posid'];
$resulta = $db->prepare("SELECT sum(votes) FROM candidates WHERE posid= :a");
$resulta->bindParam(':a', $dsds);
$resulta->execute();
for($i=0; $rowa = $resulta->fetch(); $i++){
$dsada=$rowa['sum(votes)'];
}
echo '<div style="margin-top: 18px;">';
echo '<strong>'.$row['pos_name'].' '.'</strong><br>';
$results = $db->prepare("SELECT * FROM candidates,student WHERE candidates.idno=student.idno AND candidates.syearid = '$no'AND posid = :a ORDER BY votes DESC");
$results->bindParam(':a', $dsds);
$results->execute();
for($i=0; $rows = $results->fetch(); $i++){
if($dsds=='Commissoner'){
echo $rows['prog_id'].$rows['prog_id'].' '.$rows['prog_name'].' = '.$rows['votes'];
}else {
//this is the part
echo'<?php $src=array("candidates/images/".$rows["image"]); for($i=0;$i<3;$i++){ ?>';
echo '<img src="candidates/images<?php echo .$src[$i];?>" class="image-inner" />';}
$sdsd=$dsada
?>
<!-- <img src="candidates/images/percent.gif"width='<?php echo(100*round($rows['votes']/($sdsd),2)); ?>'height='10'>-->
<?php
if ($rows['votes']==0){
echo "<br>";}
else {
// echo(100*round($rows['votes']/($sdsd),2)); /
/*?>%<br>*/
/*<?php
}
echo '</div>';*/
}
}
?>
<?php
}
?>

Answer 1

This is the easiest way i can explain using php. Hopes this will help you to understand
.image-inner {
position: relative;
width: 150px;
display: inline-block;
}
<?php
$src = array(
'http://www.google.com/logos/2008/de_doodle4google08.gif',
'http://www.google.com/logos/2012/d4g_poland12-hp.jpg',
'http://www.google.com/logos/2011/colombia-independenceday11-hp.jpg'
);
for($i = 0; $i < 3; $i++)
{
echo "<img src='{$src[$i]}' class='image-inner' />";
}
?>

Answer 2

Display the divs as inline-block like so :
#christmas_promotion_boxes div {
display: inline-block;
}
jsFiddle