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班级。

这是小提琴：http: //jsfiddle.net/e3Csf/

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

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

Answer 2

尝试这个

我创建了一个css，这应用了你的内部 div

.otherDiv{overflow:hidden;}

HTML

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

              <div class="otherDiv">  // add here class
              <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 3

添加一些jQuery：

$('.grey-container').height($('.grey-container').outerHeight() + $('table').height());

jsfiddle.net/Hive7/y9NQq/3

确保你有一个 js 文件