如何连续对齐三张图像

Question

重定向此页面时，数据库中会有一定数量的图像，这些图像未知，这意味着我无法相应地设置 div 的数量。我追求的是无论那里有多少张图像，我都希望以连续三张图像的方式显示它，第四张将从新行的左侧开始。我尝试使用col-md-4尝试在一行中对齐三张图像，但是第四张图像是在下一行的中央还是右侧？

this

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

<div class="row col-md-12">
    @foreach($images as $image)
        <div class="col-md-4">
            <img src="{{ $image->image }}" alt="{!! $image->title !!}" width="50%" height="auto" >
            <div class="btn btn-primary edit-image-btn">Edit</div>
            <div class="btn btn-danger delete-image-btn">Delete</div>
        </div>
    @endforeach
</div>

Answer 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"  width="100%" height="auto">
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"  width="100%" height="auto">
            
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"  width="100%" height="auto">
            
        </div>

       <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff" alt="alternative"  width="100%" height="auto" >

        </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"  width="100%" height="auto">
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"  width="100%" height="auto">
            
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"  width="100%" height="auto">
            
        </div>
        
        <div class="clearfix"></div>

       <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff" alt="alternative"  width="100%" height="auto" >

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

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

Answer 3

您不应在同一div中使用行和列类名称：

<div class='row'>
    <div class="col-md-12">
        @foreach($images as $image)
            <div class="col-md-4">
                <img src="{{ $image->image }}" alt="{!! $image->title !!}" width="50%" height="auto" >
                <div class="btn btn-primary edit-image-btn">Edit</div>
                <div class="btn btn-danger delete-image-btn">Delete</div>
            </div>
        @endforeach
    </div>
</div>

Answer 4

<div class="row col-md-12">
    @foreach($images as $image)
        <div class="col-md-3">
            <img src="{{ $image->image }}" alt="{!! $image->title !!}" width="100" height="auto" >
            <div class="btn btn-primary edit-image-btn">Edit</div>
            <div class="btn btn-danger delete-image-btn">Delete</div>
        </div>
    @endforeach
</div>