Question

我希望图像自动处于水平状态，我应该再放一个div吗？因为图片会按位置自动保存

这是我的CSS：

.row{
    display: block;
    height:auto;
    width:auto;
}

.box_img2{
    width: 20px;
    padding : 5px;
    margin-bottom:5px;
    background-color:white;
    height:30px;
    float:center;
}

这是我的PHP：

<?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 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 {
                                            echo "<div class='row'><div class='box_img2'><br>";
                                            echo '<img src="savephp/images/'.$rows['image'].'" width="60" height="70px" />'.'&nbsp;'.$rows['lastname'].',&nbsp;'.$rows['firstname'].'<br>'.'&nbsp;=&nbsp;'.$rows['votes'];
                                            echo '</div>';
                                        }
                                        echo '</div>'.'</div>';
                                            $sdsd=$dsada    
                                        ?>
                                    <br><br><br><br><br>

                                    <img src="../img/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
            }
            ?>

这是图像： I want to be like this

Answer 1

试试这个：

.box_img2{
width: 20px;
padding : 5px;
background-color:white;
height:30px;
position: fixed; /* or absolute */
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -10px;
}

Answer 2

尝试沿着这条路走下去，看看Boostrap的方法来做缩略图网格等等，可能对你有所帮助。

注意，img CSS更像是一个/或者一个东西......一个中心，另一个将填充其容器的33％。

<style type='text/css'>
    .row:before, .row:after { clear:both; }

    .img-container {
        float:left;
        width:33%;
        text-align:center;
    }
    .img-container img { /* if you want it centered */
        display:block; margin:0 auto;
    }
</style>
<div class='row'>
    <?php for($i=0; $rows = $results->fetch(); $i++) { ?>
        <div class='img-container'>
            <img src="savephp/images/<?php echo $rows['image'] ?>" width="60" height="70px" />
            &nbsp;<?php echo $rows['lastname'] ?>, <?php echo $rows['firstname'] ?><br />
            &nbsp;=<?php echo $rows['votes'] ?>
        </div>
    <?php } ?>
</div>

更新我已更新上面的代码，以便大致了解如何将图片放入页面。您可以根据需要构建其余的HTML和条件。需要注意的重要一点是，如果您想要横向移动3张图像，请将.img-container的宽度设为33％。如果您只需要水平2，请将.img-container的宽度设为50％。它们将自动换行到下一行。您的代码为每个条目创建一个新的<div class="row">，这会将每个新条目放在自己的行上，而不是让它们水平布局。

如果你达到了想要100％行的点数，你可以用width:100%给它一个不同的类，它会把它自己放在自己的行上。

同样，如果您查找网格如何与Bootstrap 3一起使用，它将帮助您获得所需的几乎任何对齐，我强烈建议您使用类似的东西来开始，然后一旦您擅长创建布局...然后弄清楚＆＃34;如何＆＃34;他们这样做。

图像不能水平显示

2 个答案: