Question

我有这些新闻块但是当我点击“显示更多”时，我无法移除的块之间出现空格

演示： sitelab.combr.co/repro.html

此时此刻
块之间的空间

我希望它如何工作：即使在新闻块扩展之后，如果没有块之间的空格，则一个在另一个之下

码

		
   $(document).ready(function(){

   var content = $('.card-text');
   var moretext = "Show more ❯";
   var lesstext = "Show less";


  content.each(function(){
          if ($(this).text().length > 83) {
  
              $(this).addClass('truncate-ellipsis');
              $(this).after( '<a href="" class="readmore-link">' + moretext + '</a>' );
          }
        


      });

  $('.readmore-link').on('click', function(b){
   b.preventDefault();
   if($(this).prev().hasClass("truncate-ellipsis")) {
            $(this).prev().removeClass("truncate-ellipsis");
            $(this).html('Fechar');
            $(this).attr('class','readmore-link');
            
        } else{


            
            $(this).prev().addClass("truncate-ellipsis");
            $(this).html(moretext);
          
        }
      return false;

  });




   });

		
.truncate-ellipsis{
 display: block;
 display: -webkit-box;
 height: 60px;
 text-overflow: ellipsis;
 overflow: hidden;
    -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.readmore-link{

  color:blue;
}

<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
           <!-- Rab Css -->
        <link rel="stylesheet" href="http://sitelab.combr.co/css/style.css"/>

</head>
<body>
	  <div class="container">
    <div class="row row-centered">
    
    <h1 class="title">News</h1>
    <h2 class="subtitle">Lorem Ipsum is simply dummy text</h2>
   
 
<div class="card-deck">
 <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">CNN</h4>
                        <div class="meta">
                            <a href="#">News1</a>
                        </div>
                        <div class="card-text">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
                        </div>
                    </div>
                   
                </div>
            </div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">CNN</h4>
                        <div class="meta">
                            <a href="#">News 2</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege</div>
                    </div>
                   
                </div>
            </div>
 <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>

  <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>

   <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>

  <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>

              <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>


</div>
</div>
</div>

</body>
</html>

Answer 1

实际上，只有使用Bootstrap使用的relative位置和float系统才能获得您的愿望。因为每个新的块线位置都是相对于前一个高度线设置的。因此，如果您在一行中增加元素高度，则所有下一个元素将向下移动。

您的第一个解决方案是在card-deck课程中使用列布局。但这意味着您的卡片不会自动并排放置。其中一些将被放置在其他位置之上，按列排序。这是一个用#test div制作的例子，它比其他元素高。如您所见（在代码段fullPage模式下），#test div下的元素向下移动。

.card-deck {
  column-width: 300px;
column-gap: 10px;
width: 90%;
max-width: 100%;
margin: 50px auto;
}

.card {
  border: 2px solid grey;
  margin: 0 2px 15px;
  padding: 10px;
  padding-bottom: 10px;
  background: #fcfcfc;
  display: inline-block;
}

#test {
  height: 500px;
}

.card-img-top {
  width: 100%;
}

.card-block {
  padding: 1.25rem;
}

 <div class="card-deck">
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card" id="test">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>

      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>

    </div>

您可以使用的另一种解决方案是将元素位置设置为绝对值。使用像Masonry这样的网格布局库可能是一个好主意。

Masonry是一个JavaScript网格布局库。它通过放置工作基于可用垂直空间的最佳位置的元素，排序就像石匠在墙上贴石头一样。你可能已经看过了在互联网上使用。

如何删除块之间的这个空间？

1 个答案: