css并排放2张图片

CSS是前端开发中不可或缺的一部分，它可以用来美化网页，使用户体验更加舒适。其中，让两张图片并排显示是一项经常使用的技能。

style>
img{
         display:inline-block;
         width: 45%;
}
    /style>
    div>
        img src="image1.jpg">
        img src="image2.jpg">
    /div>
    

在上面的代码中，我们通过设置图片的display属性为inline-block，来使两张图片并排显示。并且为了让图片之间有一定的间距，我们使用了width属性将图片宽度设置为45%。

在实际应用中，我们可能需要对图片位置进行微调，比如让图片居中，或让其中一张图片在另一张图片上方或下方显示。这时，我们可以使用position属性来实现。

style>
img{
         display:block;
         margin:auto;
}
img:first-child{
         position:relative;
         top: -50px;
}
    /style>
    div>
        img src="image1.jpg">
        img src="image2.jpg">
    /div>
    

在上面的代码中，我们将图片的display属性设置为block，使其成为一个块级元素。然后使用margin属性将图片居中显示。接着，我们通过设置第一张图片的position属性为relative，并将top属性设置为-50px,使其上移了50像素的位置。

总的来说，使用CSS让两张图片并排显示，可以给网页带来更加生动有趣的效果。需要注意的是，在实际应用中应该根据具体情况做出一些微调。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！