如何防止HTML元素移動由於其他大型元素

這是我多麼希望這部分被設置。我可以輕鬆地複製和粘貼更多的「單元格」元素，爲它下面的圖片和文字製作更多的「單元格」。但是，如果其中一個元素的文本太大，它會移動所有其他元素，並搞亂整齊的矩陣設置。

如果文字太大，我寧願將它剪掉並保持矩陣的形狀，而不是移動矩陣中的所有元素以爲文字騰出空間。我怎麼能做到這一點？

我的HTML看起來像這樣

  <div class="about_box"> 
     <div class="container"> 
      <h3>Our Team</h3> 
      <div class="col-md-3 row_1"> 
       <img src="images/a1.jpg" class="img-responsive" alt=""/> 
       <h5><a href="#">nonummy</a></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> 
       <a href="#" class="btn_2">more</a> 
      </div> 
      <div class="col-md-3 row_1"> 
       <img src="images/a2.jpg" class="img-responsive" alt=""/> 
       <h5><a href="#">euismod</a></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> 
       <a href="#" class="btn_2">more</a> 
      </div> 
      <div class="col-md-3 row_1"> 
       <img src="images/a3.jpg" class="img-responsive" alt=""/> 
       <h5><a href="#">tincidunt</a></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> 
       <a href="#" class="btn_2">more</a> 
      </div> 
      <div class="col-md-3 row_1"> 
       <img src="images/a4.jpg" class="img-responsive" alt=""/> 
       <h5><a href="#">laoreet</a></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> 
       <a href="#" class="btn_2">more</a> 
      </div> 
      <div class="col-md-3 row_1"> 
       <img src="images/a4.jpg" class="img-responsive" alt=""/> 
       <h5><a href="#">laoreet</a></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> 
       <a href="#" class="btn_2">more</a> 
      </div> 
      <div class="col-md-3 row_1"> 
       <img src="images/a4.jpg" class="img-responsive" alt=""/> 
       <h5><a href="#">laoreet</a></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> 
       <a href="#" class="btn_2">more</a> 
      </div> 
      <div class="col-md-3 row_1"> 
       <img src="images/a4.jpg" class="img-responsive" alt=""/> 
       <h5><a href="#">laoreet</a></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> 
       <a href="#" class="btn_2">more</a> 
      </div> 
      <div class="clearfix"> </div> 
     </div> 
     </div>

一類的col-md-3 row_1每個div位於矩陣

來源

2017-04-23 Smaugy

您可以使用文本溢出的單個元素：省略號爲它使用文本（。 ..）來表示溢出的文本。您還需要將div的溢出設置爲隱藏。然後相應地使用引導網格。

來源

2017-04-23 19:19:55

嗯，這似乎沒有工作 – Smaugy

文本被隱藏了嗎？或者它是同樣的問題..？爲包含文本的div給出高度。 –

嘗試添加此：

<style> 
.row_1{ 
height:auto; 
max-height:120px; 
overflow:hidden; 
} 
</style>

來源

2017-04-23 19:20:06

由於某些原因，如果我這樣做並將最大高度設置爲24％或更低，它就可以工作！但是，如果我把它設置爲高於24％，我又有同樣的問題。我無法做到儘可能低的最大高度，但它壓縮了很多照片的高度，並將所有東西放在一起。 – Smaugy

您可以設置寬度％。例如：div.container div {width: 20%;}

來源

2017-04-23 19:26:38 Jegger

手動設置寬度允許每行有更多元素，但不能解決問題 – Smaugy

爲什麼您必須手動設置它們？ 'div.container div {width：20％;}'應該適用於所有'cell'。然而，在沒有看到代碼如何工作的情況下幫助你有點困難。 – Jegger

我通常使用PHP來修剪冗長的文本。看看這個功能：

function smartTrimString($str, $len){ 
    $str=trim($str); 
    if (strlen($str)>$len) 
     return substr($str,0,$len)."..."; 
    else 
     return $str; 
}

來源

2017-04-23 20:09:46

如何防止HTML元素移動由於其他大型元素

回答

相關問題