0

在此处输入图像描述

我正在制作一个照片库，其中所有图像都从 MySQL 数据库中提取并使用echo ('<div class="photo"> <img src="' . $row['name'] . '" /> </div>');. 我试图让图像适合固定宽度的容器，并让它们全部均匀分布，如图所示。我一直有这个问题，图像垂直间隔不均匀。有人可以帮我解决这个问题吗？我已经包含了我的来源。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style1.css">
    </head>

<body>
    <div class="container">
<?php
require 'DB.php';



    try{      
    $stmt ='SELECT * FROM victoria';
    foreach ($conn->query($stmt) as $row)
        {
        echo ('<div class="photo"> <img src="' . $row['name'] . '" /> </div>');
        }
    }  catch (PDOException $e){
        echo 'Connection failed: ' . $e->getMessage();
    }


?>
    </div>

</body>

</html>

CSS

body{
    background-color: #013FF0;
}

.container {
    width: 1000px;
    background-color: #000000;
    text-align: center;

}

.photo{
    width: 300px;
    height: 300px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: left;
}

.photo img{

    width: 250px;
    height: auto;

}
4

1 回答 1

1

添加line-height: 300px;和vertical-align: middle;到.photo：

.photo {
    width: 300px;
    height: 300px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: left;
    text-align: center;
    line-height: 300px;
}

.photo img {
    vertical-align: middle;
}

这是一个工作示例：http: //jsfiddle.net/QXGuH/。

于 2013-09-08T20:07:29.383 回答