4

在双列表中（其中两列都设置为 valign top 并且文本设置为 text-align: baseline），如果图像存在于第二列的第一行并且图像高度高于文本本身，两列中的文本未对齐。

当图像存在于第二列的第一行时，我想将 padding-top 动态添加到第一列。如果调整了窗口大小并且图像不再位于第一行（或将新图像推入第一行），则第 1 列中文本的 padding-top 应自动更新以确保基线文本在两列中对齐.

    <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 回答
1 
create style as below 
table.padtop120 {
    padding-top: 120px;
}

and in javascript add below statement for you table or row id as below

<script>
$( document ).ready(function() {
$("#tableid").addClass('padtop120');
});
</script>    
it'll be applied dynamically
于 2018-03-17T06:06:00.527 回答