图库水平显示相同大小的图像

问题描述：

我正在处理HTML和CSS，并且我很难将图像水平对齐而不是垂直对齐。图库水平显示相同大小的图像

我试图显示他们的内联块和内联都没有工作。而且我也希望我的图像具有相同的尺寸。

这里是我的html代码：

#gallery { 
 
    width: 500px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    z-index: 1; 
 
    margin: 100px auto; 
 
    display: inline; 
 
} 
 

 
#gallery img { 
 
    width: 50%; 
 
    height: auto; 
 
    border: 5px solid #FFFFFF; 
 
    margin: 10px; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
}

<div id="gallery"> 
 
    <a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee"><img src="images/gallery1.png"></a> 
 
    <a href="images/gallery2.png" data-lightbox="roadtrip" data-title="Ian and Vee"><img src="images/gallery2.png"></a> 
 
    <a href="images/gallery3.png" data-lightbox="roadtrip" data-title="Ian and Vee"><img src="images/gallery3.png"></a> 
 
    <a href="images/gallery4.png" data-lightbox="roadtrip" data-title="Ian and Vee"><img src="images/gallery4.png"></a> 
 
    <a href="images/gallery5.png" data-lightbox="roadtrip" data-title="Ian and Vee"><img src="images/gallery5.png"></a> 
 
    <a href="images/gallery6.png" data-lightbox="roadtrip" data-title="Ian and Vee"><img src="images/gallery6.png"></a> 
 
    <script src="lightbox2-master/dist/js/lightbox-plus-jquery.js"></script> 
 
</div>

你的意思是你想要垂直显示所有图像......？ –

@RameshS我想横向显示所有图像 –

@mplungjan没有大声笑抱歉忘记删除那 –

答

试试这个：

div.gallery { 
 
    margin: 5px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    width: 180px; 
 
} 
 

 
div.gallery:hover { 
 
    border: 1px solid #777; 
 
} 
 

 
div.gallery img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
}

<div class="gallery"> 
 
    <a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee"> 
 
    <img src="images/gallery1.png" width="600" height="400"> 
 
    </a> 
 
</div> 
 
<div class="gallery"> 
 
    <a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee"> 
 
    <img src="images/gallery1.png" width="600" height="400"> 
 
    </a> 
 
</div> 
 
<div class="gallery"> 
 
    <a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee"> 
 
    <img src="images/gallery1.png" width="600" height="400"> 
 
    </a> 
 
</div> 
 
<div class="gallery"> 
 
    <a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee"> 
 
    <img src="images/gallery1.png" width="600" height="400"> 
 
    </a> 
 
</div> 
 
<div class="gallery"> 
 
    <a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee"> 
 
    <img src="images/gallery1.png" width="600" height="400"> 
 
    </a> 
 
</div> 
 
<div class="gallery"> 
 
    <a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee"> 
 
    <img src="images/gallery1.png" width="600" height="400"> 
 
    </a> 
 
</div>

你可以在这里看到https://jsfiddle.net/nucgw4km/ –

答

答案更简单。添加一个浮点到你的图像。

#gallery { 
    width: 500px; 
    overflow: hidden; 
    position: relative; 
    z-index: 1; 
    margin: 100px auto; 
    display: inline; 
} 

#gallery img { 
    float: left; 
    width: 50%; 
    height: auto; 
    border: 5px solid #FFFFFF; 
    margin: 10px; 
    box-sizing: border-box; 
    margin: 0 auto; 
    padding: 0; 
}

图库水平显示相同大小的图像

相关推荐