2017-06-22 156 views
1

我有這方面的消息塊,但是當我點擊「顯示更多」看來,我無法刪除如何刪除塊之間的空間?

演示塊之間的空間: sitelab.combr.co/repro.html

在這一刻

The space between the blocks

如何,我想它的工作之間的空間:如果沒有塊之間的空間下面一個其他即使在消息塊已擴大 Without the spaces between the blocks one below the other even after the news block has expanded

代碼

\t \t 
 
    $(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; 
 

 
    }); 
 

 

 

 

 
    });
\t \t 
 
.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> 
 
\t <meta charset="UTF-8"> 
 
\t <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> 
 
\t <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>

+0

https://stackoverflow.com/q/34480760/3597276 –

回答

0

其實,這是不可能得到的行爲舉止你的願望只有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這樣的網格佈局庫可能是一個好主意。

砌體是一個JavaScript網格佈局庫。它的工作原理是將 元素放置在基於可用垂直空間的最佳位置,排序爲 ,類似於牆上鑲嵌石匠的石匠。你可能在 中看到過它在互聯網上使用。

+0

爲什麼使用'flex:1 1 auto;'當你不使用'display:flex'? ... flex:1 1 auto;'對沒有它的任何元素都沒有影響。 – LGSon

+0

是的! :) 我贊同你。這是我的錯誤。我忘記清除我在嘗試解決問題時編寫的代碼。我沒有看到它。感謝您的報告並提醒您,我將更新答案。正如你所說,這些屬性是無用的,所以我達到的效果仍然沒有他們的作品 –