html - 在表格内格式化

Question

这是我的三列页面结构:30-40-30

这是 fiddle :http://codepen.io/karimkhan/pen/BDfhJ

问题是:我想将 div 放置在特定高度的右侧部分，div-height 为 200px。

当我将 style="height:150px" 放在右侧部分 div 中时，右侧 div 保持在顶部，左侧和中间部分移动到 150px 高度。

为什么？

<table border="0" width="100%">
    <tr>
        <td style="width:30%">
            <div class="left">
            Hi
            </div>
       </td>
            <td style="width:40%">
              <div class="middle"> 
                            <input type="text" id="url" width="80%">    
                            <button type="submit" onclick="GetSentiment()" value="Submit">GetSentiment</button>
               </div>
            </td>

            <td style="width:30%">
            <div class="right" style="height:150px">
                      nice

            </div>
            </td>

    </tr>

            </table>

Answer 1

这是因为 <td> 中的文本元素默认垂直居中。如果将样式应用于 <div> s在另一个<td>元素，它们也会表现出来。或者，您可以执行 <td valign="top"...>对于每个 <td> .

编辑:我注意到您上面发布的代码比您在 github 上发布的代码多简单。可能还有其他因素，包括影响您的生产代码的 JavaScript 或其他样式。如果没有生产 HTML、CSS 和脚本，就不可能确定可能影响布局的所有内容。