css - 实现 3 个图像精确大小的 CSS

Question

所以我无法将 3 张图片放在同一行中，

问题是，这些图片并不总是相同的，所以当我上传一张尺寸不同的图片时，所有东西都会移动。有什么建议可以实现这一点吗？谢谢

HTML:

           <div class="first-slot">
             <div class="masonry-box post-media">
               <img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
                 <div class="shadoweffect">
                   <div class="shadow-desc">
                    <div class="blog-meta">
                     <span class="bg-orange"><a href="category-01.php" title="">'.$row['categoria'].'</a></span>
                      <h4><a href="single.php?id='.$row['id'].'" title="">'.$row['titulo'].'</a></h4>
                     <small><a href="single.php?id='.$row['id'].'" title="">'.$row['fecha'].'</a></small>
                     <small><a href="single.php?id='.$row['id'].'" title="">'.$row['autor'].'</a></small>
                    </div>
                   </div>
                 </div>
             </div>
           </div>

CSS:

    .first-slot {
    float: left;
    width: 65%;
    height: 35%;
}

.last-slot,
.second-slot {
    float: left;
    width: 35%;
    height: 28%;
}

自举

    .img-fluid {
  max-width: 100%;
  height: auto;
}

Answer 1

我认为这会解决您的问题。您可以在代码中使用这些类名和 css。根据您的要求更改图像 src 位置。并根据需要更改 css 中的 margin 属性。 PS: 不要忘记在元素文件中包含 Bootstrap 链接

 .imgItem{

        display: inline-block;
        margin: 10px;
    }
    .imgContainer{
        display: flex;
    }


<div class="row">
      <div class="col imgContainer" >
            <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
                </div>
           <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
           </div>
           <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
           </div>
       </div>
    </div>