gpt4 book ai didi

html - 表格内的滚动保持垂直

转载 作者:太空宇宙 更新时间:2023-11-03 18:04:14 25 4
gpt4 key购买 nike

我一直在尝试制作一个水平显示 3 张图片的表格,这些图片会在 rollover.hover 上单独更改。但是图像一直在垂直方向下排列。

如果你能提供帮助那就太好了。

<table style="width: 678px; height: 380px; cellpadding: 0; cellspacing: 1 "> 
<tbody>
<tr align="center"> <td style="width: 220px; height: 380px;">
<style type="text/css"> #first-div.rollover a {
display: block;
width: 225px;
height: 380px;
background-image: url(IMG1a);
}
#first-div.rollover a:hover {
background-image: url(IMG1b);
}
</style><div class="rollover"> </a> </td><td style="width: 220px; height: 380px;"> <style type="text/css"> #second-div.rollover a {
display: block;
width: 225px;
height: 380px;
background-image: url(IMG2a);
}
#second-div.rollover a:hover {
background-image: url(IMG2b);
}
</style><div class="rollover"></a> <td style="width: 220px; height: 380px;"> <style type="text/css"> #third-div.rollover a {
display: block;
width: 225px;
height: 380px;
background-image: url(IMG3a);
}
#third-div.rollover a:hover {
background-image: url(IMG3b);
}
</style>
<div class="rollover"></a>
</td>
</tr>
</tbody>
</table>
<div class="rollover" id="first-div">
<a href="link1"></a> </div> <div class="rollover" id="second-div">
<a href="link2"></a> </div> <div class="rollover" id="third-div">
<a href="link3"></a>
</div>

最佳答案

最好将您的 CSS 放在不同的文件中。如果您必须使用内联 CSS(您实际上不需要),请确保将其全部放在一个位置,在 <head> 中。标签。

您的标记中有很多错误(下面列出了一些错误)。我已经清理了你的代码并在这个 JSFiddle 中为你提供了一个工作示例:http://jsfiddle.net/V3x6w/

  • 您正在关闭行上从未打开过的标签 ( </a> )13、22、32。
  • 您有多个 <style>表格内的标签
  • 你的 <div>带有背景图片的标签不在表格内。
  • Cellspacing 和 cellpadding 不是 css 属性,而是 HTML 属性 - 像这样使用它们:<table cellspacing="0" cellpadding="0"

关于html - 表格内的滚动保持垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24954461/

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