防止分成多行的標題將內容向下推？

Question

我在 2 列設置中引入了一堆博客。 有些標題很長，分成 2 行，有時 3 行。

問題是，它會將下面的特色圖像向下推，如果一個標題占用多行，標題下的圖像不會垂直排列。

一旦標題分成多行，有沒有辦法防止下面的內容被下推？

<div class="row">
  <div class="col-md-6">
   <h2>This Heading takes up One line</h2>
    <img src="#">
  </div>

 <div class="col-md-6">
    <h2>This Heading takes 2 lines and pushes the image below down, throwing off vertical alignment with the image next to it.</h2>
     <img src="#">
 </div>

</div>

Answer 1

如果您希望在一行主要文章圖像中維護 alignment，無論標題有多長，也許您可以截斷標題？

例子：

 .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* just to get the 2 cols side-by-side */.row { display: flex; flex-direction: row; justify-content: space-between; }.col-md-6 { width: 47%; flex-grow: 0; flex-shrink: 0; outline: 2px solid black; }

 <div class="row"> <div class="col-md-6"> <h2 class="truncate">This Heading takes up One line</h2> <img src="#"> </div> <div class="col-md-6"> <h2 class="truncate">This Heading takes 2 lines and pushes the image below down, throwing off vertical alignment with the image next to it.</h2> <img src="#"> </div> </div>

如果不能選擇截斷標題，您還可以將博客標題/圖像 blob 顯示為 flexbox 列，並使用內容對齊來保持圖像對齊，有點像這樣：

 /* use a flexbox column to keep the longer titles under control */.col-md-6 { display: flex; flex-direction: column; justify-content: space-between; } /* just using a quick grid to get 2 columns - not necessary for the above to work */.row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }

 <div class="row"> <div class="col-md-6"> <h2>This Heading takes up One line</h2> <img src="#"> </div> <div class="col-md-6"> <h2>This Heading takes 2 lines and pushes the image below down, throwing off vertical alignment with the image next to it.</h2> <img src="#"> </div> <div class="col-md-6"> <h2>A title that's not quite as long by maybe 2 lines</h2> <img src="#"> </div> <div class="col-md-6"> <h2>Yet another title</h2> <img src="#"> </div> </div>

希望這可以幫助您進一步前進。 祝你好運，編碼愉快！