Html Chrome&Safari没有将我的表格拉伸以适合其内容
我正在开发的这个网页上有一个元素,我需要我的文本与上面图像的宽度一致——其宽度总是不同的——想想标题。我发现了许多关于使用1px表强制这种宽度调整行为的参考资料。我遇到了一些问题,尽管Safari和Chrome看到了这条指令——文本最终变成了一个大小不大的文本框,位于图像后面 在我看来,问题与嵌套在表中的div中的文本和图像有关。我需要将图像放在一个div中,因为我正在使用一个名为cycle的jQuery脚本,它将一组图像转换为幻灯片。问题可能也与脚本有关。在任何情况下,我尝试了无数次的组合,在所有的div上向左浮动和向左清除,改变它们的位置和宽度…没有任何效果。有没有人知道该怎么做 编辑1:好的,我应该编辑我的帖子还是回答 以下是我遇到的问题的url- 以及守则:Html Chrome&Safari没有将我的表格拉伸以适合其内容,html,css,nested,css-tables,Html,Css,Nested,Css Tables,我正在开发的这个网页上有一个元素,我需要我的文本与上面图像的宽度一致——其宽度总是不同的——想想标题。我发现了许多关于使用1px表强制这种宽度调整行为的参考资料。我遇到了一些问题,尽管Safari和Chrome看到了这条指令——文本最终变成了一个大小不大的文本框,位于图像后面 在我看来,问题与嵌套在表中的div中的文本和图像有关。我需要将图像放在一个div中,因为我正在使用一个名为cycle的jQuery脚本,它将一组图像转换为幻灯片。问题可能也与脚本有关。在任何情况下,我尝试了无数次的组合,在
<div id="content" class="boxes">
<table>
<tr>
<td >
<div id="imageFrame"> <a href="#" class="img" title="_MG_9786_fmt.jpeg"> <img src="images/_MG_9786_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5169_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5169_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5175_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5175_fmt.jpeg"/> </a> <a href="#" class="img" title="aerial_fmt.jpeg" width=""> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/aerial_fmt.jpeg"/> </a> </div>
<div id="cycleCtrl">
<div id="prev" class="pager"><a href="#">< Prev</a> </div>
<div id="next" class="pager"><a href="#">Next ></a></div>
<div id="pagerNav" class="pager"></div>
</div>
<div id="descController">
<img src="images/arrow.gif" name="arrow" width="5" height="10" id="arrow" /> <span id="projectName">Toronto Centre for the Arts </span> <br />
<div id="desc"> In the past eight years...
</div>
</div></td>
<td width="90%"><!--push col 1 back--></td>
</tr>
</table>
我用清晰的图像尺寸修复了它。请编辑您的问题,并发布再现问题的最少代码量。如果可能的话,如果您没有个人网络空间,请链接到一个实时演示jsbin.com或jsfiddle.net。
#content {
position: absolute;
top: 250px;
left: 275px;
float: left;
clear: both;
}
#content table {
float: left;
width: 1px;
}
#imageFrame {
position: relative;
float: left;
clear: left;
width: inherit;
}
#desc {
position: relative;
clear: left;
float: left;
}
#descController {
position:relative;
padding-top:5px;
padding-bottom:10px;
clear: left;
float: left;
}
#descController div {
height:0;
overflow:hidden;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
padding-top:10px;
margin-top: 10px;
word-spacing: 0em;
line-height: 16px;
font-size: 12px;
position: relative;
float: left;
clear: left;
}