Question

我想在一个页面上有八张图片，每行有4张图片，这些图片的大小和对齐方式相互对齐。我之前想到了这一切，但丢失了我的代码。我的图像大小都相同，但是我不能让它们分成两行4，我无法使灯箱工作。我不确定是不是因为我正在使用div框或什么。 如何连续拍摄前四张照片，第二张照片中的第二张照片将全部对齐？我做错了什么因为灯箱不能工作

<!DOCTYPE html>
<html>
<head>
<title>Amber & Melissa Engagement</title>

<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/ecp.css">
    <link rel="stylesheet" type="text/css" href="css/lightbox.css">
    <script type="text/javascript" src="js/lightbox.min.js"></script>
 <div class=:"flowerLogo">
 <img src="img/engagementheader.png" style="width:100%">
 </div>
 <div class="partners">
 <div class="picture">
 <a href="https://azoltek.000webhostapp.com/ElizabethChristina/img/engagement1.png"     data-lightbox="gallery"><img src="img/engagement1.png"/></a>
<div class="picture">   
<a href="https://azoltek.000webhostapp.com/ElizabethChristina/img/engagement2.png"     data-lightbox="gallery"><img src="img/engagement2.png"/></a>
<div class="picture"> 
<a href="https://azoltek.000webhostapp.com/ElizabethChristina/img/engagement3.png"     data-lightbox="gallery"><img src="img/engagement3.png"/></a>
<div class="picture">
<a href="https://azoltek.000webhostapp.com/ElizabethChristina/img/engagement4.png"     data-lightbox="gallery"><img src="img/engagement4.png"/></a>
<div class="partners">
<div class="picture">

 <a     href="https://azoltek.000webhostapp.com/ElizabethChristina/img/engagement5.png"     data-lightbox="gallery"><img src="img/engagement5.png"/></a>
 <div class="picture">
 <a href="https://azoltek.000webhostapp.com/ElizabethChristina/img/engagement6.png"     data-lightbox="gallery"><img src="img/engagement6.png"/></a>
<div class="picture">
 <a       href="https://azoltek.000webhostapp.com/ElizabethChristina/img/engagement7.png"     data-lightbox="gallery"><img src="img/engagement7.png"/></a>
<div class="picture">
 <a     href="https://azoltek.000webhostapp.com/ElizabethChristina/img/engagement8.png"     data-lightbox="gallery"><img src="img/engagement8.png"/></a>

</div>

我已将所有div框关闭，但我不打算全部写出来。这是CSS代码：

.partners{
white-space: nowrap;
width: 100%;
text-align: center;

}


.picture{ 
display: inline-block;
padding-top: 20px;
display: table-cell;

}
.picture img{
height: 450px;
width: 300px;  
padding: 20px;
vertical-align: middle;

如何按行排列图像并使用灯箱

0 个答案: