Question

enter image description here

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

<!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;

}

Answer 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/。

无论大小如何，均匀创建均匀图像

1 个答案: