html - 将表格右对齐时的 Div 高度问题

Question

以下是我的 div CSS，在我将此表属性添加到我的 div 容器之前它工作正常:<table align="right" /> .添加这个后，我的 div 容器高度被挤压，里面的表格溢出了 div。这是示例图片:

请帮我解决这个问题。

这是我的 CSS:

.grey-container
{
 background-color: #F5F5F9;
 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #F5F5E6;
    padding: 10px;
    margin: 10px 20px 20px 20px;


}

这是我的 HTML:

<div class="grey-container">
           <span style="color: #7E7E7E; font-size: 17px; font-weight: bold;">Add Quality Measure</span>

              <div style=" margin-top:5px;">
              <table align="right" class="table-padding" width="350" border="0">
            <tr>
              <td width="200" align="right"><span class="grey-h1" >Quality Measures</span>
              </td>
              <td width="150">
              <select>
              <option>Diabetes - HbA1c</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
              </td>
            </tr>


            </table>
              </div>
         </div>

Answer 1

只需将 overflow:hidden; 添加到您的 grey-container 类。

这是 fiddle : http://jsfiddle.net/e3Csf/

这里有更多关于“溢出:隐藏”的魔法:

http://colinaarts.com/articles/the-magic-of-overflow-hidden/