0

以下は、このテーブル属性を div コンテナー内に追加する前に正常に動作していた div CSS です<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>
4

3 に答える 3

1

クラスに追加overflow:hidden;するだけです。grey-container

ここにフィドルがあります： http://jsfiddle.net/e3Csf/

"overflow:hidden" マジックについてもう少し説明します。

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

于 2013-07-16T07:46:36.777 に答える
1

これを試して

私はそれを作成し、これはあなたの内側のdivcssを適用します 

.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>

デモ

于 2013-07-16T07:43:15.150 に答える
0

jquery を追加します。

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

jsfiddle.net/Hive7/y9NQq/3

ただし、jsファイルがあることを確認してください

于 2013-07-16T07:51:40.533 に答える