帖子标题中断至下一行或堆栈时，布局中断

Question

当冗长的帖子标题分成两行并导致元素的高度增加时，布局将中断。

完整的标题必须可见，因此不能使用text-overflow: ellipsis或hidden之类的东西。

在“标题”元素上设置min-height可以解决破损。

这是幼稚的方法还是可以改进的？

:: Edit-无法添加JS，仅添加CSS。

---

2列布局

---

第一个容器的高度现在大于相邻容器的高度

Answer 1

请参见我已使用CSS flex box解决的问题

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.parent{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap ;
  flex-wrap: wrap;
  margin: 0 -15px;
  width: 100%;
  
}
.eachChid{
  width: 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  padding: 0 15px;
} 
.eachChid img{
  width: 100%;
  
}
.wrapper{
  padding: 0 15px;
}

<div class="wrapper">
<div class="parent">
  <div class="eachChid">
    <img class="irc_mi" src="https://images.theconversation.com/files/199508/original/file-20171215-17857-cns8cs.jpg?ixlib=rb-1.1.0&amp;q=45&amp;auto=format&amp;w=926&amp;fit=clip" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
  
    <div class="eachChid">
    <img class="irc_mi" src="https://storage.googleapis.com/afs-prod/media/afs:Medium:3700800010/775.jpeg" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
  
    <div class="eachChid">
    <img class="irc_mi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9l0myTx3_TZEMQnJNvRnUJibglLctOfqLYmN9zfSrELVDfsG1" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
  
    <div class="eachChid">
    <img class="irc_mi" src="https://images.theconversation.com/files/199508/original/file-20171215-17857-cns8cs.jpg?ixlib=rb-1.1.0&amp;q=45&amp;auto=format&amp;w=926&amp;fit=clip" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like). over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
  
    <div class="eachChid">
    <img class="irc_mi" src="https://images.theconversation.com/files/199508/original/file-20171215-17857-cns8cs.jpg?ixlib=rb-1.1.0&amp;q=45&amp;auto=format&amp;w=926&amp;fit=clip" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
</div>
</div>

Answer 2

您可以通过CSS来解决此问题，例如：

.box{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }