如何在一行中对齐三个图像

Posted 2023-03-05

【中文标题】如何在一行中对齐三个图像

【英文标题】：How to align three images on a row

【发布时间】：2019-05-06 16:34:36

【问题描述】：

当这个页面被重定向时，数据库中会有一定数量的图像未知，这意味着我无法相应地设置div的数量。我追求的是不管有多少图像，我想以连续三张图像的方式显示它，第四张将从新行的左侧开始。我尝试使用 col-md-4 尝试将三个图像对齐在一行上，但第四个图像在下一行的中心或右侧？

这就是我所追求的。假设数据库中有 5 张图片，我希望它像这样显示

<div class="row col-md-12">
    @foreach($images as $image)
        <div class="col-md-4">
            <img src=" $image->image "    >
            <div class="btn btn-primary edit-image-btn">Edit</div>
            <div class="btn btn-danger delete-image-btn">Delete</div>
        </div>
    @endforeach
</div>

【问题讨论】：

您的预期结果是什么？你想把第四张图片放在哪里？

@ItayGal 在数据库中会有未知数量的图像，可能是 5 个甚至 10 个。我要检索所有这些图像，然后连续显示 3 个图像

好的，但这就是你现在得到的。第二排呢？你想把第四张图片放在左边吗？

@ItayGal 我现在得到的如上图所示。是的，我希望第四个从左侧的下一行开始，然后第五个将在第四个的右侧，依此类推....

请与 css 分享您生成的完整代码。 bootstrap 的默认行为是将下一项放在左侧。你可能有一些 CSS 会改变

【参考方案1】：

问题

第一张图片的高度大于第二张和第三张图片的高度，这意味着当添加第四张图片时，它会被添加到一个新的行上，但是那里有第一个可用的垂直空间。

您实际上可以同时合并以下两种解决方案，clearfix 是最合适且用途广泛的，但替代解决方案也有一些设计优势。

clearfix解决方案

添加div 和.clearfix 将强制网格系统创建视觉上看起来像是新行的内容。 这是最好的解决方案，您可以比较图片的索引，然后每第三张图片添加一个clearfix div。

替代解决方案

您可以将图像作为背景放置到div（而不是使用img 标签），并使用CSS 将这些div 强制设置为height。这并不能解决你的问题，它只是避免它。

如果您设置background-size: cover; background-position: center center;，那么所有图像都会覆盖可用空间，尽管您会丢失一些图像，这是明智的最佳解决方案设计（我的偏好）。

如果显示所有图像很重要，请使用background-size: contain;。

.col-xs-4 
   padding:4px;

   
.image-div 
   height: 100px;
   background-size:cover;
   background-position: center center;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Ej0hUpn6wbrOTJtRExp8jvboBagaz+Or6E9zzWT+gHCQuuZQQVZUcbmhXQzSG17s" crossorigin="anonymous">

<h4>Current Problem</h4>
<div class="container">
  <div class="col-md-12 row">

        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x600/000/fff"   >
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"   >
            
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"   >
            
        </div>

       <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"     >

        </div>

   </div>
</div>


<h4>`clearfix` Solution</h4>
<div class="container">
  <div class="col-md-12 row">

        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x600/000/fff"   >
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"   >
            
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"   >
            
        </div>
        
        <div class="clearfix"></div>

       <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"     >

        </div>

   </div>
</div>

<h4>Alternative Solution</h4>

<div class="container">
  <div class="col-md-12 row">

 
       <div class="col-xs-4">
            <div class="image-div" style="background-image:url('https://dummyimage.com/600x600/000/fff'); " >
</div>
        </div>
         
       <div class="col-xs-4">
            <div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
        </div>
         
       <div class="col-xs-4">
            <div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
        </div>
         
       <div class="col-xs-4">
            <div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
        </div>

   </div>
</div>

【讨论】：

我正在使用@foreach 来显示我数据库中的所有图像，clearfix 不起作用

您可以计算循环内的图像，并在每次 3 个项目后添加 clearfix

我已更新我的答案以演示 clearfix 解决方案，以及使用 div 并将图像设置为背景的替代方案。

【参考方案2】：

检查下面的代码并更新小提琴https://jsfiddle.net/dgmrsnb6/

<div class="container">
  <div class="row images-wrapper">
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
  </div>
</div>

【参考方案3】：

<div class="row col-md-12">
    @foreach($images as $image)
        <div class="col-md-3">
            <img src=" $image->image "    >
            <div class="btn btn-primary edit-image-btn">Edit</div>
            <div class="btn btn-danger delete-image-btn">Delete</div>
        </div>
    @endforeach
</div>

【参考方案4】：

你不应该在同一个 div 中使用 row 和 col 类名：

<div class='row'>
    <div class="col-md-12">
        @foreach($images as $image)
            <div class="col-md-4">
                <img src=" $image->image "    >
                <div class="btn btn-primary edit-image-btn">Edit</div>
                <div class="btn btn-danger delete-image-btn">Delete</div>
            </div>
        @endforeach
    </div>
</div>