html - 如何连续对齐三张图像

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



这就是我所追求的。假设数据库中有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>

最佳答案

问题

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

实际上，您可以同时合并以下两个解决方案，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>