如何水平显示两个图像?

时间:2016-01-15 06:04:59

标签: php css

我遇到了问题,需要回答。如何自动水平放置2张图像。

我想我会用一些if(1 ==%3)? 在示例pic中我真的很想横向2个图像不知道怎么做?

这就是我所做的:

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" />'.',&nbsp;'.'<br>'.$rows['lastname'].',&nbsp;'.$rows['firstname'].'<br>'.'&nbsp;=&nbsp;'.$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>';
                        }

                        ?>

Sample of my problem

这是我的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;
    }

这是我的整个代码:

<?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'].'&nbsp;'.'</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'].'&nbsp;&nbsp;'.$rows['prog_name'].'&nbsp;&nbsp;=&nbsp;&nbsp;'.$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
                }
                ?>

2 个答案:

答案 0 :(得分:1)

divs显示为inline-block,如下所示:

#christmas_promotion_boxes div {
  display: inline-block;
}

jsFiddle

答案 1 :(得分:1)

这是我用php解释的最简单方法。希望这有助于您理解

&#13;
&#13;
.image-inner {
  position: relative;
  width: 150px;
  display: inline-block;
}
&#13;
<?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' />";
  }
?>
&#13;
&#13;
&#13;