重定向此页面时,数据库中将存在一定数量的图像,这些图像是未知的,这意味着我无法相应地设置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>