1

请看这个小提琴：http: //jsfiddle.net/wd9G8/1/

每当我尝试向“问题小部件”添加内容时，它都会导致 tds 的底行增长。

更具体地说，我想添加一个带有幻灯片插件的 div，如下所示：

<div id="my-slideshow" class = "slides">
  <ul class="bjqs">
    <li><a href=""><img src="images/photos/pic.jpg" /></a></li>
    <li><a href=""><img src="images/photos/pic.jpg" /></a></li>
  </ul>
</div>

TD的内容不大于TD本身。TD 不应该为寻找放置内容的空间而苦苦挣扎。如果您添加一个或两个简单的 br 标签，您已经可以看到底行在增长。

有什么明显的我做错了吗？（除了使用表格进行布局）。

任何帮助，将不胜感激。

4

3 回答 3

0

由于问题小部件在表格的底部结束，因此一旦它增长，最低行必须随之增长。因为“问题小部件”也在最下面一行。

这就是表格的工作方式。

您可以将“问题小部件”降低一排，这样底行将被推开，而不是扩展，或者您可以为 td 设置一个高度，高于它的高度。

除此之外，我能想到的唯一更好的解决方案是在 div 中重建，但我认为这不是你想要的。

于 2013-11-14T13:28:52.430 回答
0

不确定我是否可以在这方面为您提供很大帮助，但一种防止 tds 将其他内容推到一边的方法是将所有 tds 设置为宽度，并使宽度之和等于表格的宽度。

例如：

表格 = 宽度：400 像素；
td1 = 宽度：50 像素；
td2 = 宽度：250 像素；
td3 = 宽度：100 像素；

我相信同样的想法适用于它的高度。

于 2013-11-14T13:37:59.907 回答
0

尝试这个：

HTML

<td rowspan="2">
<div id="my-slideshow" class = "slides">
<ul class="bjqs">
     <li><a href=""><img src="images/photos/pic.jpg" /></a></li>
     <li><a href=""><img src="images/photos/pic.jpg" /></a></li>
</ul>
</div>
</td><!-- The Problem TD -->

CSS

.bjqs{
    margin:0 !important;
}

问题是 ul 的边距（顶部和底部）。

于 2013-11-14T13:38:15.480 回答