html - 列数问题：位置绝对元素出现在第一列
问题描述
column-count我打算在 CSS中使用 masonry 。我知道有更简单的解决方案，例如为砌体结构创建多个列，但由于 PHP laravel 项目的复杂性，我需要column-count在调用图像时仅在 CSS 中使用。
这是我目前面临的问题：
如您所见，由于column-count: 3交叉position: absolute按钮项目现在在上一列中显示为一半。我试过了
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
但没有任何改变。
下面是相关的CSS代码和HTML代码：
<div class="card-columns">
@if ($gallery_images->isNotEmpty())
@foreach ($gallery_images as $gallery)
<div class="card">
{{-- <img class="card-img-top" src="{{ $gallery->url }}"> --}}
<img class="card-img-top" src="{{ $gallery->url }}">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
@if(Auth::user()->user_type_id != 3)
{{-- <i class="fas fa-trash close font-size-12 text-danger"></i> --}}
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
@endif
</a>
</div>
</div>
@endforeach
@endif
</div>
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
@media (min-width: 576px)
.card-columns {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}
@media (min-width: 576px)
.card-columns .card {
display: inline-block;
width: 100%;
}
.card-columns .card {
margin-bottom: 24px;
}
.card-img, .card-img-top, .card-img-bottom {
flex-shrink: 0;
width: 100%;
}
.preview-remove-btn {
position: absolute;
width: 10px;
height: 10px;
top: -16px;
right: -2px;
font-size: 18px;
}
解决方案
为防止出现此问题margin-top，请在您的卡中添加：
/** CSS Added **/
.card{
margin-top: 20px;
}
基于BS 4.5的演示：
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
@media (min-width: 576px)
.card-columns {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}
@media (min-width: 576px)
.card-columns .card {
display: inline-block;
width: 100%;
}
.card-columns .card {
margin-bottom: 24px;
}
.card-img, .card-img-top, .card-img-bottom {
flex-shrink: 0;
width: 100%;
}
.preview-remove-btn {
position: absolute;
width: 10px;
height: 10px;
top: -16px;
right: -2px;
font-size: 18px;
}
/** CSS Added **/
.card{
margin-top: 20px;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
<i class="fas fa-trash close font-size-12 text-danger"></i>
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
<i class="fas fa-trash close font-size-12 text-danger"></i>
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
</a>
</div>
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
<i class="fas fa-trash close font-size-12 text-danger"></i>
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
<i class="fas fa-trash close font-size-12 text-danger"></i>
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
<i class="fas fa-trash close font-size-12 text-danger"></i>
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
</a>
</div>
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card p-3 text-right">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
<i class="fas fa-trash close font-size-12 text-danger"></i>
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
</a>
</div>
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
<i class="fas fa-trash close font-size-12 text-danger"></i>
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>推荐阅读
- ruby-on-rails - 可以通过命令启动 binding.pry 会话吗？
- flutter - Flutter RiverPod：如何将每次运行的后期处理添加到 FutureProvider？
- excel - vlookup 函数不适用于单元格更改处理程序
- python - 改成新的json
- apache-spark - Spark 3.0 在 Timestamp DataType 列上使用 partitionBy 时的行为变化？
- typescript - Vue js 元素 ui 对话框
- c - 我如何编写这个 C 函数，以便用户可以在以后不使用“免费”的情况下调用它？
- regex - 在bash中修剪变量
- spring-boot - ControllerAdvice 没有选择由作为 @RequestParam 传递的不正确 UUID 值引发的 IllegalArgumentException
- bash - 文件为空时如何删除多个子目录