gpt4 book ai didi

javascript - 当第二列的第一行中存在图像时,jQuery动态更改表中第一列的填充顶部

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:35:23 27 4
gpt4 key购买 nike

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

当第二列的第一行中存在图像时,我想将 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;
}

最佳答案

为了让它更容易一些,让我们在表中的第一个 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);
}
}

还没有检查代码中的语法错误或其他任何东西,但它应该很容易理解。

关于javascript - 当第二列的第一行中存在图像时,jQuery动态更改表中第一列的填充顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14941782/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com