HTML在删除元素后移动元素
HTML在删除元素后移动元素
提问于 2018-12-14 05:55:22
作为一个学校项目，我正在创建一个像Google Keep这样的网站，在那里你可以创建和分享笔记。为了显示现有笔记，我使用Bootstraps容器、行和卡片。这很好用，直到一个元素被删除，这在旧元素所在的位置创建了一个间隙。如何删除间隙并使元素移动以填充间隙？
这些元素包括：
<div class="col-sm-4">
</div>提前谢谢你，尼基塔
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-14 06:27:00
最简单的解决方案可能是在一个.row元素中对每n个注释进行而不是包装。如果你这样做，卡片将会自动回流。
虽然没有MCVE很难给出直接的答案。
// Demo code to illustrate card removal.
$( function () {
$( '.notes' ).on( 'click', '.card', function ( e ) {
$( this ).parent().remove();
} );
} );.card {
margin-bottom: 1rem;
padding: 2rem 4rem;
text-align: center;
cursor: pointer;
}
.card:hover {
background-color: #eaeaea;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container notes">
<div class="row">
<div class="col col-sm-4">
<div class="card">1</div>
</div>
<div class="col col-sm-4">
<div class="card">2</div>
</div>
<div class="col col-sm-4">
<div class="card">3</div>
</div>
<div class="col col-sm-4">
<div class="card">4</div>
</div>
<div class="col col-sm-4">
<div class="card">5</div>
</div>
<div class="col col-sm-4">
<div class="card">6</div>
</div>
<div class="col col-sm-4">
<div class="card">7</div>
</div>
<div class="col col-sm-4">
<div class="card">8</div>
</div>
<div class="col col-sm-4">
<div class="card">9</div>
</div>
<div class="col col-sm-4">
<div class="card">10</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53770639
复制相关文章
相似问题