4

2 列の表 (両方の列が valign top に設定され、テキストが text-align:baseline に設定されている) で、画像が 2 列目の最初の行に存在し、画像の高さがテキスト自体よりも高い場合、両方の列のテキストが揃っていません。

2 列目の 1 行目に画像が存在する場合、1 列目に動的に padding-top を追加したいと考えています。ウィンドウのサイズが変更され、画像が最初の行に表示されなくなった場合 (または新しい画像が最初の行にプッシュされた場合)、列 1 のテキストの上部のパディングが自動的に更新され、ベースライン テキストが両方の列にまたがるようになります。 .

    <html>
    <head>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    </head>
    <body>
    <table>
        <tr>
            <td style="vertical-align:top"><p class="tabhead">Note:</p></td>
            <td style="vertical-align:top"><p class="tabtext">This is text and - z0mg no, not an image!<img src="http://files.softicons.com/download/web-icons/minicons-numbers-icons-by-icojam/png/16x16/blue/025.png" /> what will we do?<br />Save us!</p></td>
        </tr>
    </table>
    </body>
    </html>

スタイルシート

    .tabhead
    {
        display: block;
        vertical-align: top;
        font-family: "Tahoma", verdana, arial, helvetica, sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        font-size: 9pt;
     }
    .tabtext 
    {
        font-family: "Tahoma", verdana, arial, helvetica, sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 9pt;
        vertical-align: baseline;
     }
4

2 に答える 2

10

少し簡単にするために、テーブルの最初のtd要素にid="column_1"属性を追加しましょう。

$(document).ready(function()
{
    window.setInterval("update_tbl_padding()", 100);
}

function update_tbl_padding()
{
    //if column 1 has either a direct or indirect img element as a descendant
    //if you wanted it to be a direct child element the selector would be
    //$("#column_1 > img")
    if($("#column_1 img").size() >= 1)
    {
       //just an example
       var pad_top_val = "5px";
       $("#column_1").css("padding-top", pad_top_val);
    }
    //since you're checking to see if a new image is pushed in, I'm guessing you
    //would want to check to see if its taken out too...hence this else clause
    else
    {
      var pad_top_default_val = "0px";
      $("#column_1").css("padding-top", pad_top_default_val);
    }
}

シンタックスエラーなどのコードをチェックしていませんが、簡単に理解できるはずです。

于 2013-02-18T19:22:57.657 に答える