Question

我在一些不同的蛋糕（我在高中的考试项目）上创建了一个数据库，现在我想在我的画廊中显示我的数据库中的图片，以表格的形式水平对齐，或者只是有几个图像每一行。

我已经在互联网上浏览了几个小时，我找到的答案是如何使用float：left或display：inline-block，我已经尝试了这两个以及更多，但我的代码不会工作。

叠加层和容器div对于此问题不应该很重要，但如果这些是问题，请告诉我们。非常感谢你提前。这是我当前厨房的照片，以及我的CSS和html / php。

的HTML / PHP：

echo"
        <div class='container'> 
                <img src='images/".$billede."' alt=".$navn." class='image'/>
                <div class='overlay'> ".$navn." ".$pris."</div>
        </div>
    ";

的CSS：

.container {
position: relative;
width: 50%;
max-width: 300px;
}

.overlay {
 position: absolute; 
 bottom: 0; 
 background: rgb(0, 0, 0);
 background: rgba(0, 0, 0, 0.5); /* Black see-through */
 color: #f1f1f1; 
 width: 100%;
 transition: .5s ease;
 opacity:0;
 color: white;
 font-size: 22px;
 font-family: "Calibri";
 padding: 20px;
 text-align: center;
}

.image {
display: inline-block;
width: 300px;
height: auto;
float: left;
}

Image of the current situation

我的数据库中的图像不会水平对齐（不是浮动或内联块）

0 个答案: