Html Chrome&Safari没有将我的表格拉伸以适合其内容

Html Chrome&Safari没有将我的表格拉伸以适合其内容,html,css,nested,css-tables,Html,Css,Nested,Css Tables,我正在开发的这个网页上有一个元素,我需要我的文本与上面图像的宽度一致——其宽度总是不同的——想想标题。我发现了许多关于使用1px表强制这种宽度调整行为的参考资料。我遇到了一些问题,尽管Safari和Chrome看到了这条指令——文本最终变成了一个大小不大的文本框,位于图像后面 在我看来,问题与嵌套在表中的div中的文本和图像有关。我需要将图像放在一个div中,因为我正在使用一个名为cycle的jQuery脚本,它将一组图像转换为幻灯片。问题可能也与脚本有关。在任何情况下,我尝试了无数次的组合,在

我正在开发的这个网页上有一个元素,我需要我的文本与上面图像的宽度一致——其宽度总是不同的——想想标题。我发现了许多关于使用1px表强制这种宽度调整行为的参考资料。我遇到了一些问题,尽管Safari和Chrome看到了这条指令——文本最终变成了一个大小不大的文本框,位于图像后面

在我看来,问题与嵌套在表中的div中的文本和图像有关。我需要将图像放在一个div中,因为我正在使用一个名为cycle的jQuery脚本,它将一组图像转换为幻灯片。问题可能也与脚本有关。在任何情况下,我尝试了无数次的组合,在所有的div上向左浮动和向左清除,改变它们的位置和宽度…没有任何效果。有没有人知道该怎么做

编辑1:好的,我应该编辑我的帖子还是回答

以下是我遇到的问题的url-

以及守则:

 <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;
}