Question

这是我遇到的常见情况，我还没有想出一个不涉及JavaScript的解决方案。所以我要说我有类似

的东西

<table class="some-table">
    <tr>
         <td valign="top">
             <h3>Headline 1</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>          </td>
         <td valign="top">
             <h3>Headline 2</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
         </td>
         <td valign="top">
             <h3>Headline 3, Maybe On 2 Lines</h3>
             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
         </td>
    </tr>
</table>

或

<div class="row">
     <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
         <h3>Headline 1</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>    
     </div>
     <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
         <h3>Headline 2</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
     </div>
     <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
          <h3>Headline 3, Maybe On 2 Lines</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
     </div>
</div>

并且UI设计者或其他像素推动者感到不安，第三个标题包裹在第二行，从而导致子文本（“Ut enim ad minim veniam ......”）垂直错位其他的subtexts。我过去和现在一起解决的解决方案都是

在min-height

h3

将一个名为make-height-of-tallest的类添加到h3，并在调用height时使用Javascript设置h3的{{1}}。

另一个失败的解决方案是将事物分成像

window.resize

但当然不允许在移动设备上正确堆叠内容。

地狱是什么解决了Web开发人员必须解决的常见问题？

小提琴：

如何使列具有相同的标题和子文本高度？

0 个答案: