Question

所以我在同一行中无法拟合3张图像，

问题是，这些图像并不总是相同的，所以当我上载大小不同的图像时，一切都会移动。谢谢

HTML：

CSS：

           <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>

引导程序

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

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

Answer 1

我认为这可以解决您的问题。您可以在代码中使用这些类名和CSS。根据您的要求更改图像src的位置。然后根据需要在CSS中更改margin属性。 PS：dnt忘记在项目文件中包含引导程序链接

 .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>

Answer 2

<img src="upload/'.$row['fotos'].'" alt="" class="img-fluid" width="" height="">

在html中使用width和height是一个选项

实现3张图片的大小完全相同

2 个答案: