blocks|key|2555365|text|最简单的解决方案可能是在一个.row元素中对每n个注释进行而不是包装。如果你这样做，卡片将会自动回流。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|2555366|虽然没有MCVE很难给出直接的答案。|2555367|​|2555368|//+Demo+code+to+illustrate+card+removal.
$(+function+()+{
++
++$(+'.notes'+).on(+'click',+'.card',+function+(+e+)+{
++++$(+this+).parent().remove();
++}+);
++
}+);|code-block|syntax|javascript|2555369|.card+{
++margin-bottom:+1rem;
++padding:+2rem+4rem;
++text-align:+center;
++cursor:+pointer;
}

.card:hover+{
++background-color:+#eaeaea;
}|2555370|<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>|2555371|2555372|entityMap|0|LINK|mutability|MUTABLE|url|http://stackoverflow.com/help/mcve^0|E|4|T|3|0|4|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|17|8|@]|E|@$9|18|A|19|1|1A]]|F|$]]|$1|I|3|J|5|6|7|1B|8|@]|E|@]|F|$]]|$1|K|3|L|5|M|7|1C|8|@]|E|@]|F|$N|O]]|$1|P|3|Q|5|M|7|1D|8|@]|E|@]|F|$N|O]]|$1|R|3|S|5|M|7|1E|8|@]|E|@]|F|$N|O]]|$1|T|3|J|5|6|7|1F|8|@]|E|@]|F|$]]|$1|U|3|-4|5|6|7|1G|8|@]|E|@]|F|$]]]|V|$W|$5|X|Y|Z|F|$10|11]]]]

<p>The simplest solution might be to <strong>not</strong> wrap every <em>n</em> notes in a <code>.row</code> element. If you do this, the cards will reflow on their own.</p>

<p>Though it is hard to give a direct answer without an <a href="http://stackoverflow.com/help/mcve">MCVE</a> to work from.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Demo code to illustrate card removal.
$( function () {
  
  $( '.notes' ).on( 'click', '.card', function ( e ) {
    $( this ).parent().remove();
  } );
  
} );</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
  margin-bottom: 1rem;
  padding: 2rem 4rem;
  text-align: center;
  cursor: pointer;
}

.card:hover {
  background-color: #eaeaea;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"&gt;

&lt;div class="container notes"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;5&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;8&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;9&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-sm-4"&gt;
      &lt;div class="card"&gt;10&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>As a school project I am creating an website like Google Keep where you can create and share notes. To display existing notes i use Bootstraps container, row and cards. This works fine until one element is deleted which creates a gap where the old element was. How can I remove the gap and make elements move to fill the gap?</p>

<p>The elements are:</p>

<pre><code>&lt;div class="col-sm-4"&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks in advance,
Nikita</p>


HTML Move elements after element deleted

容器

作为一个学校项目，我正在创建一个像Google Keep这样的网站，在那里你可以创建和分享笔记。为了显示现有笔记，我使用Bootstraps容器、行和卡片。这很好用，直到一个元素被删除，这在旧元素所在的位置创建了一个间隙。如何删除间隙并使元素移动以填充间隙？这些元素包括：<div class="col-sm-4"></...

问HTML在删除元素后移动元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML在删除元素后移动元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML在删除元素后移动元素
EN