0

我正在寻找一种将孩子div放在父母底部的方法div。父级div放置在td具有动态高度的 a 内，具体取决于行的内容。我尝试了几次尝试，包括position: relativeandposition: absolute解决方案，但由于动态高度，它没有奏效。有人有想法吗？

编辑：

我没有使用表格进行布局。该表用于显示从服务器动态加载的数据。我添加了一张图片，显示了如何将两者divs放在td. 父母div目前没有特定的风格。我不需要支持旧版本的 IE。该站点将主要用于最新版本的 Firefox、Chrome 和 Safari。

布局 http://img29.imageshack.us/img29/5271/e49.png

4

3 回答 3

1

You should be able to position the child div by using absolute positioning. Set the parent div to relative position, then child to absolute and bottom:0; You will then need to adjust the vertical align of the <td> elements if you want the parent div to also be at the bottom.

your css would be something like - 

div#container{width:200px;height:200px;
  border:1px solid #666;
  position:relative;
}

div#bottom{
  width:100px;height:100px;
  border:1px solid #f00;
position:absolute;bottom:0;
}

here is a sample jsfiddle - http://jsfiddle.net/LRy6h/

and one where the parent div is also at the bottom - http://jsfiddle.net/LRy6h/1/

and one with resizeable (dynamic) heights - http://jsfiddle.net/LRy6h/2/

and another one to match your updated image - http://jsfiddle.net/LRy6h/3/

于 2013-09-09T00:44:21.700 回答
1

我找到了另一种解决问题的方法。我将height对应的tr以及父级的 设置为 100%。这是一个代码片段：heighttddiv

html + css:

<tr style="height: 100%;" ng-repeat="order in orders">
  <td style="height: 100%;" >
    <div style="height: 100%; position:relative;">
      <span>PARENT - SOME TEXT</span>
      <div style="position:absolute; bottom: 0;" >CHILD</div>
    </div> 
  </td>
</tr>
于 2013-09-10T11:31:14.280 回答
0

对不起，但我必须写一个答案而不是添加评论（没有足够的声誉）。

听起来好像您正在使用表格进行布局 - 这不是一个好主意！;-)
此外，如果您发布相关的 HTML 和 CSS 代码，或者更好地设置 jsFiddle，这将很有帮助。

您如何设置父 DIV 的样式？
没有跨浏览器的方式将其设置为 TD 的高度（仅使用 CSS）。“现代”方式可能是使用“flexbox”。但这取决于您必须支持的浏览器（和版本）以及您想要实现的布局。

在表格元素上使用“位置：相对”也不起作用，因为这样做的行为是“未定义的”。

因此，要真正给您一些好的建议，缺少一些信息。

于 2013-09-08T22:44:07.370 回答