Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/420.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使栏目标题和潜台词的高度相同?_Javascript_Html_Css_Twitter Bootstrap 3 - Fatal编程技术网

Javascript 如何使栏目标题和潜台词的高度相同?

Javascript 如何使栏目标题和潜台词的高度相同?,javascript,html,css,twitter-bootstrap-3,Javascript,Html,Css,Twitter Bootstrap 3,这是我遇到的常见场景,我还没有找到一个不涉及JavaScript的解决方案。那么让我们假设我有 <table class="some-table"> <tr> <td valign="top"> <h3>Headline 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing eli

这是我遇到的常见场景,我还没有找到一个不涉及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>
但当然,这不允许在移动设备上正确堆叠

对于web开发人员中的一个常见问题,到底什么是解决方案


Fiddle:

为什么不使用display:flex?使用CSS3 flexbox将是解决这一问题的完美解决方案,谷歌或使用它获取有关此主题的更多信息。
<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>
<table class="some-table">
    <tr>
         <td valign="top">
           <h3>Headline 1</h3>
         </td>
         <td valign="top">
           <h3>Headline 2</h3>
         </td>
         <td valign="top">
           <h3>Headline 3, Maybe On 2 Lines</h3>
         </td>          
    </tr>
    <tr>
         <td valign="top">                 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>          </td>
         <td valign="top">                 
             <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">                 
             <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>